jquery模擬多級(jí)復(fù)選框效果的簡(jiǎn)單實(shí)例
今天又次體會(huì)到j(luò)query的強(qiáng)大了,做了個(gè)多級(jí)復(fù)選框的效果,代碼總共就20+行就over了。
我又想用js來做一個(gè)看看,才寫了幾個(gè)方法就寫不動(dòng)了,兼容性要考慮很多,而且代碼量直線上升。
主要分享下jquery的這個(gè)效果的實(shí)現(xiàn)。代碼塊分兩塊:
一是全選的效果,就是點(diǎn)擊全選的復(fù)選框時(shí)它的子孫都相應(yīng)被選中或者未選中。這個(gè)很好做,代碼如下:
evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle是點(diǎn)擊的復(fù)選框
二是當(dāng)前復(fù)選框的父框根據(jù)當(dāng)前框的兄弟是否全選中來決定父框是否選中,再繼續(xù)往上看父框的父框等。
當(dāng)全選中時(shí)這里的實(shí)現(xiàn)使用parents來得到所有的父框,對(duì)每一個(gè)的操作結(jié)合each來完成。
當(dāng)非全選中時(shí)父框依次失去被選中。代碼如下:
if (evtEle.is("input:checked")) { evtEle.parents(".checks").each(function () { !$(this).children("p").children("input:checkbox").filter(function () { return !this.checked; })[0] && $(this).prev().children("input:checkbox").attr("checked", "checked"); }); } else { evtEle.parents(".checks").prev().children("input:checkbox").attr("checked", false); }
以上這篇jquery模擬多級(jí)復(fù)選框效果的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jquery模擬SELECT下拉框取值效果
- jQuery 文本框模擬下拉列表效果
- 用jQuery實(shí)現(xiàn)的模擬下拉框代碼
- 用jQuery模擬select下拉框的簡(jiǎn)單示例代碼
- jQuery模擬下拉框選擇對(duì)應(yīng)菜單的內(nèi)容
- jquery 模擬類搜索框自動(dòng)完成搜索提示功能(改進(jìn))
- 模擬多級(jí)復(fù)選框效果的jquery代碼
- jquery 模擬雅虎首頁的點(diǎn)擊對(duì)話框效果
- jQuery模擬12306城市選擇框功能簡(jiǎn)單實(shí)現(xiàn)方法示例
- jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
相關(guān)文章
jQuery實(shí)現(xiàn)用戶注冊(cè)的表單驗(yàn)證示例
用戶注冊(cè)的表單往往是需要進(jìn)行驗(yàn)證的,否則會(huì)有一些不否合規(guī)則的數(shù)據(jù)入庫,后果會(huì)不堪設(shè)想,下面為大家詳細(xì)介紹下通過jquery是如何實(shí)現(xiàn)的,下面有個(gè)示例,感興趣的朋友可以參考下2013-08-08jQuery使用before()和after()在元素前后添加內(nèi)容的方法
這篇文章主要介紹了jQuery使用before()和after()在元素前后添加內(nèi)容的方法,實(shí)例分析了jQuery中before()和after()方法添加內(nèi)容的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jQuery實(shí)現(xiàn)鼠標(biāo)劃過修改樣式的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)劃過修改樣式的方法,涉及jQuery針對(duì)鼠標(biāo)事件及樣式操作的技巧,是jQuery鼠標(biāo)事件的典型應(yīng)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04html文件中jquery與velocity變量中的$沖突的解決方法
在使用velocity模版引擎的環(huán)境下,使用jquery時(shí)其中$與velocity變量中的$沖突,下面有個(gè)不錯(cuò)的解決方法,感興趣的朋友可以參考下2013-11-11JQuery記住用戶名和密碼的具體實(shí)現(xiàn)
這篇文章主要介紹了JQuery實(shí)現(xiàn)記住用戶名和密碼的方法,需要的朋友可以參考下2014-04-04JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID")
JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID"),使用jquery的朋友可以參考下。2011-08-08jquery 層次選擇器siblings與nextAll的區(qū)別介紹
jquery 層次選擇器包括siblings與nextAll,本文為大家介紹下具體的使用方法,想學(xué)習(xí)的朋也可以參考下,希望對(duì)大家有所幫助2013-08-08Jquery uploadify圖片上傳插件無法上傳的解決方法
很多的朋友都有遇到Jquery uploadify圖片上傳插件無法上傳的情況,下面為大家介紹下不錯(cuò)的解決方法,感興趣的朋友可以參考下2013-12-12