模擬多級復(fù)選框效果的jquery代碼
更新時間：2013年08月13日 16:26:49 作者：
今天又次體會到j(luò)query的強(qiáng)大了，做了個多級復(fù)選框的效果，代碼塊分兩塊:一是全選的效果、二是當(dāng)前復(fù)選框的父框根據(jù)當(dāng)前框的兄弟是否全選中來決定父框是否選中
今天又次體會到j(luò)query的強(qiáng)大了，做了個多級復(fù)選框的效果，代碼總共就20+行就over了。
我又想用js來做一個看看，才寫了幾個方法就寫不動了，兼容性要考慮很多，而且代碼量直線上升。
主要分享下jquery的這個效果的實(shí)現(xiàn)。代碼塊分兩塊：
一是全選的效果，就是點(diǎn)擊全選的復(fù)選框時它的子孫都相應(yīng)被選中或者未選中。這人很好做，代碼如下：
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í)現(xiàn)使用parents來得到所有的父框，對每一個的操作結(jié)合each來完成。
當(dāng)非全選中時父框依次失去被選中。代碼如下：
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來做一個看看，才寫了幾個方法就寫不動了，兼容性要考慮很多，而且代碼量直線上升。
主要分享下jquery的這個效果的實(shí)現(xiàn)。代碼塊分兩塊：
一是全選的效果，就是點(diǎn)擊全選的復(fù)選框時它的子孫都相應(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)前框的兄弟是否全選中來決定父框是否選中，再繼續(xù)往上看父框的父框等。
當(dāng)全選中時這里的實(shí)現(xiàn)使用parents來得到所有的父框，對每一個的操作結(jié)合each來完成。
當(dāng)非全選中時父框依次失去被選中。代碼如下：
復(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下載
相關(guān)文章
基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計時實(shí)例代碼
倒計時效果在我們的日常生活中經(jīng)常會用到，比如說高考倒計時、元旦放假倒計時、春節(jié)放假倒計時等等，下面通過本篇文章給大家分享基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計時實(shí)例代碼，對jquery倒計時相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了JQuery標(biāo)簽頁效果,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery響應(yīng)鼠標(biāo)事件動態(tài)遍歷及切換標(biāo)簽頁的技巧,需要的朋友可以參考下2015-12-12
jQuery Selectors(選擇器)的使用(七、子元素篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實(shí)例方式進(jìn)行講述，以簡單，全面為基礎(chǔ)，不會涉及很深，我的學(xué)習(xí)方法：先入門，后進(jìn)階！2009-12-12
jquery顯示和隱藏div特效的實(shí)例代碼，需要的朋友可以參考一下2013-02-02
jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
帶進(jìn)度條的文件上傳特效，每個文件都有進(jìn)度條，都有上傳詳情介紹。效果非常不錯，這里推薦給大家。2015-08-08
這篇文章主要介紹了jQuery自定義添加"$"與解決"$"沖突的方法,介紹了用戶自定義添加“$”擴(kuò)展jQuery功能的方法,以及解決"$"沖突的技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery插件制作之全局函數(shù)用法,實(shí)例分析了jQuery中全局函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
在jquery boxy中添加百度地圖坐標(biāo)拾取注意流程
這篇文章主要介紹了在jquery boxy中添加百度地圖坐標(biāo)拾取注意流程,需要的朋友可以參考下2014-04-04
jQuery中insertAfter()方法用法實(shí)例
這篇文章主要介紹了jQuery中insertAfter()方法用法,實(shí)例分析了insertAfter()方法的功能、定義及匹配的元素插入到另一個指定的元素集合后面的使用技巧,需要的朋友可以參考下2015-01-01
對于js跨域訪問，在先前也曾碰到過，但可能并沒有認(rèn)真去對待，可能查看過相關(guān)資料，但當(dāng)著兩天再次碰到這個問題時，走了不少彎路才找到問題原因。記下這次解決過程，為自己不再強(qiáng)大的記憶力默哀一下。2011-06-06