模擬多級(jí)復(fù)選框效果的jquery代碼
更新時(shí)間：2013年08月13日 16:26:49 作者：
今天又次體會(huì)到j(luò)query的強(qiáng)大了，做了個(gè)多級(jí)復(fù)選框的效果，代碼塊分兩塊:一是全選的效果、二是當(dāng)前復(fù)選框的父框根據(jù)當(dāng)前框的兄弟是否全選中來(lái)決定父框是否選中
今天又次體會(huì)到j(luò)query的強(qiáng)大了，做了個(gè)多級(jí)復(fù)選框的效果，代碼總共就20+行就over了。
我又想用js來(lái)做一個(gè)看看，才寫(xiě)了幾個(gè)方法就寫(xiě)不動(dòng)了，兼容性要考慮很多，而且代碼量直線(xiàn)上升。
主要分享下jquery的這個(gè)效果的實(shí)現(xiàn)。代碼塊分兩塊：
一是全選的效果，就是點(diǎn)擊全選的復(fù)選框時(shí)它的子孫都相應(yīng)被選中或者未選中。這人很好做，代碼如下：
evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle是點(diǎn)擊的復(fù)選框
二是當(dāng)前復(fù)選框的父框根據(jù)當(dāng)前框的兄弟是否全選中來(lái)決定父框是否選中，再繼續(xù)往上看父框的父框等。
當(dāng)全選中時(shí)這里的實(shí)現(xiàn)使用parents來(lái)得到所有的父框，對(duì)每一個(gè)的操作結(jié)合each來(lái)完成。
當(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);
}
code下載
我又想用js來(lái)做一個(gè)看看，才寫(xiě)了幾個(gè)方法就寫(xiě)不動(dòng)了，兼容性要考慮很多，而且代碼量直線(xiàn)上升。
主要分享下jquery的這個(gè)效果的實(shí)現(xiàn)。代碼塊分兩塊：
一是全選的效果，就是點(diǎn)擊全選的復(fù)選框時(shí)它的子孫都相應(yīng)被選中或者未選中。這人很好做，代碼如下：
復(fù)制代碼 代碼如下:
evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle是點(diǎn)擊的復(fù)選框
二是當(dāng)前復(fù)選框的父框根據(jù)當(dāng)前框的兄弟是否全選中來(lái)決定父框是否選中，再繼續(xù)往上看父框的父框等。
當(dāng)全選中時(shí)這里的實(shí)現(xiàn)使用parents來(lái)得到所有的父框，對(duì)每一個(gè)的操作結(jié)合each來(lái)完成。
當(dāng)非全選中時(shí)父框依次失去被選中。代碼如下：
復(fù)制代碼 代碼如下:
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);
}
code下載
您可能感興趣的文章:
- jquery模擬SELECT下拉框取值效果
- jQuery 文本框模擬下拉列表效果
- 用jQuery實(shí)現(xiàn)的模擬下拉框代碼
- 用jQuery模擬select下拉框的簡(jiǎn)單示例代碼
- jQuery模擬下拉框選擇對(duì)應(yīng)菜單的內(nèi)容
- jquery 模擬類(lèi)搜索框自動(dòng)完成搜索提示功能(改進(jìn))
- jquery模擬多級(jí)復(fù)選框效果的簡(jiǎn)單實(shí)例
- jquery 模擬雅虎首頁(yè)的點(diǎn)擊對(duì)話(huà)框效果
- jQuery模擬12306城市選擇框功能簡(jiǎn)單實(shí)現(xiàn)方法示例
- jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
相關(guān)文章
jquery實(shí)現(xiàn)div拖拽寬度示例代碼
本例為大家演示個(gè)比較簡(jiǎn)單的div拖動(dòng)，另外可根據(jù)自己的需求，添加相應(yīng)的代碼，實(shí)現(xiàn)自己的想要的效果，具體如下，喜歡的請(qǐng)支持下2013-07-07
最簡(jiǎn)單的jQuery程序 入門(mén)者學(xué)習(xí)
用jQuery寫(xiě)的一個(gè)簡(jiǎn)單的程序,用于入門(mén)練習(xí),發(fā)給大家,希望初學(xué)者有用.2009-07-07
jquery ajax實(shí)現(xiàn)下拉框三級(jí)無(wú)刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)
jquery ajax實(shí)現(xiàn)下拉框三級(jí)無(wú)刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-10-10
這篇文章主要為大家詳細(xì)介紹了jQuery Tree Multiselect的使用方法，這個(gè)插件允許用戶(hù)以樹(shù)型的形式來(lái)呈現(xiàn)列表復(fù)選框的選擇，多用于權(quán)限管理中用于分配不同的權(quán)限，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了jQuery中g(shù)et方法用法,結(jié)合實(shí)例形式分析了jQuery的ajax交互中g(shù)et方法的功能、參數(shù)、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能【案例】
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了jQuery 表單序列化實(shí)例代碼,需要的朋友可以參考下2017-06-06
jQuery+C#實(shí)現(xiàn)參數(shù)RSA加密傳輸功能【附j(luò)sencrypt.js下載】
這篇文章主要介紹了jQuery+C#實(shí)現(xiàn)參數(shù)RSA加密傳輸功能,結(jié)合具體實(shí)例形式分析了js使用jsencrypt.js插件前端字符數(shù)據(jù)處理傳輸及C#后臺(tái)數(shù)據(jù)轉(zhuǎn)換與RSA加密相關(guān)操作技巧,并附帶jsencrypt.js供讀者下載參考使用,需要的朋友可以參考下2017-06-06
jquery1.9 下檢測(cè)瀏覽器類(lèi)型和版本的方法
本文為大家介紹下jquery1.9 下如何檢測(cè)瀏覽器類(lèi)型和版本，下面有個(gè)不錯(cuò)的示例，大家可以參考下2013-12-12
對(duì)于時(shí)間控件我比較喜歡用jQuery-ui的那個(gè)，我也比較推薦那個(gè)，所以這篇我就不對(duì)屬性，函數(shù)，API進(jìn)行翻譯了2012-07-07