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

今天又次體會到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下載