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