Simulate multi-level check box effects -- jquery, check box -- jquery

Simulate multi-level check box effects -- jquery, check box -- jquery

Today, I realized jquery's strength again. I made a multi-level check box, and the code would be over 20 + lines in total.

I want to use js for a look. I can't write it after writing a few methods, so I have to consider a lot of compatibility, and the amount of code is soaring.

This article mainly describes how jquery achieves this effect. The code block is divided into two parts:

One is the effect of full selection, that is, when you click the full check box, its descendants are selected or not selected. The Code is as follows:

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

Second, the parent box of the current check box determines whether or not the parent box is selected based on whether all the brothers in the current box are selected, and then continues to look up the parent box of the parent box.
When you select all, The implementation here uses parents to obtain all the parent boxes, and completes each operation with each.

If not all are selected, the parent box is deselected in turn. 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);                }

 

Download demo