首頁 > web前端 > js教程 > 主體

模擬多層複選框效果的jquery程式碼_jquery

WBOY
發布: 2016-05-16 17:25:39
原創
877 人瀏覽過

今天又次體會到jquery的強大了,做了個多層複選框的效果,程式碼總共就20 行就over了。

我又想用js來做一個看看,才寫了幾個方法就寫不動了,相容性要考慮很多,而且程式碼量直線上升。

主要分享下jquery的這個效果的實現。程式碼區塊分成兩塊:

一是全選的效果,就是點選全選的複選框時它的子孫都相應被選中或未選中。這人很好做,程式碼如下:

複製程式碼 程式碼如下:

evtEle. ().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle是點選的複選框

二是目前複選框的父框根據目前框的兄弟是否全選中來決定父框是否選中,再繼續往上看父框的父框等。
當全選中時這裡的實作使用parents來得到所有的父框,對每一個的操作結合each來完成。

當非全選中時父框依序失去被選取。程式碼如下:
複製程式碼 程式碼如下:

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下載
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板