jquery模擬多級復(fù)選框效果的簡單實例
今天又次體會到j(luò)query的強(qiáng)大了,做了個多級復(fù)選框的效果,代碼總共就20+行就over了。
我又想用js來做一個看看,才寫了幾個方法就寫不動了,兼容性要考慮很多,而且代碼量直線上升。
主要分享下jquery的這個效果的實現(xiàn)。代碼塊分兩塊:
一是全選的效果,就是點擊全選的復(fù)選框時它的子孫都相應(yīng)被選中或者未選中。這個很好做,代碼如下:
evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle是點擊的復(fù)選框
二是當(dāng)前復(fù)選框的父框根據(jù)當(dāng)前框的兄弟是否全選中來決定父框是否選中,再繼續(xù)往上看父框的父框等。
當(dāng)全選中時這里的實現(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); }
以上這篇jquery模擬多級復(fù)選框效果的簡單實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery使用before()和after()在元素前后添加內(nèi)容的方法
這篇文章主要介紹了jQuery使用before()和after()在元素前后添加內(nèi)容的方法,實例分析了jQuery中before()和after()方法添加內(nèi)容的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03jQuery實現(xiàn)鼠標(biāo)劃過修改樣式的方法
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)劃過修改樣式的方法,涉及jQuery針對鼠標(biāo)事件及樣式操作的技巧,是jQuery鼠標(biāo)事件的典型應(yīng)用,非常具有實用價值,需要的朋友可以參考下2015-04-04html文件中jquery與velocity變量中的$沖突的解決方法
在使用velocity模版引擎的環(huán)境下,使用jquery時其中$與velocity變量中的$沖突,下面有個不錯的解決方法,感興趣的朋友可以參考下2013-11-11JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID")
JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID"),使用jquery的朋友可以參考下。2011-08-08jquery 層次選擇器siblings與nextAll的區(qū)別介紹
jquery 層次選擇器包括siblings與nextAll,本文為大家介紹下具體的使用方法,想學(xué)習(xí)的朋也可以參考下,希望對大家有所幫助2013-08-08Jquery uploadify圖片上傳插件無法上傳的解決方法
很多的朋友都有遇到Jquery uploadify圖片上傳插件無法上傳的情況,下面為大家介紹下不錯的解決方法,感興趣的朋友可以參考下2013-12-12