jquery code to simulate multi-level checkbox effect_jquery

Today I experienced the power of jquery again. I made a multi-level check box effect, and the code was only 20 lines in total.

I wanted to use js to give it a try again, but after writing a few methods, I couldn’t write it anymore. There were a lot of compatibility issues to consider, and the amount of code skyrocketed.

Mainly share the implementation of this effect in jquery. The code block is divided into two parts:

The first is the effect of selecting all, that is, when you click on the selected check box, its descendants will be selected or unselected accordingly. This person is very easy to do, the code is as follows:

Copy the code The code is as follows:

evtEle.parent ().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle is the clicked checkbox

The second is that the parent box of the current check box determines whether the parent box is selected based on whether all the brothers of the current box are selected, and then continues to look up the parent box of the parent box, etc.
When all are selected, the implementation here uses parents to get all the parent boxes, and the operation of each is completed by combining each.

When not all are selected, the parent box will lose its selection in turn. The code is as follows:

Copy code The code is as follows:

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 download