jquery Implementation list check box select all anti-select feature Package

When we do the list, we often encounter a select-All, reverse-select batch processing problem, for example:

I was simple to achieve, and then want to encapsulate the public JS, packaging is too rotten, embarrassed to put it out (that is, the implementation of the code between the public JS, and then each page with a fixed id,class, now think I'm embarrassed to call him encapsulated), Then think of the previous boss has written this function to see how he wrote, really no comparison on no harm Ah, this is called encapsulation;

1$ (': Checkbox[data-check-target] '). Click (function () {2     vartarget = $ ( This). attr (' Data-check-target ');3     if($( This). Prop (' checked ')) {4$ (target). Prop (' checked ',true);5}Else {6$ (target). Prop (' checked ',false);7     }8});

　　First of all, the high-encapsulation here is reflected, only a custom data-check-target attribute for JS and HTML after the separation of the link bridge (and I used to use two: a full-select check box, a sub-check box, the relevant points are used, so that there is no encapsulation effect, JS and HTML coupling is too large) (I see the above JS on how to use a connection point to connect the three related things);

Next we continue to look at specific areas of use:

I found that the Select all check box is used for the custom properties of the bridge with JS Link data-check-target a bit special:

1 <input type= "checkbox" data-check-target= ". Id-checkbox"/>

It has a value of ". Id-checkbox", which looks strange, and continues to look down at the sub-check box implementation:

1 <input type= "checkbox" Name= "ids[]" value= "@item. Id "class=" Id-checkbox "/>

It's just here. The class name of the original sub check box is stored in the custom attribute Data-check-target;

1 var target = $ (this). attr (' Data-check-target ');

Then through the custom attribute Data-check-target to get the sub-check box class, so as to achieve high packaging;

I summarize that JS and HTML through the custom attribute Data-check-target communication, the sub-check box depends on the Select all check box to customize the value of the property data-check-target;

This example looks at the code is not difficult, and there is no place difficult to understand, is through a custom property cleverly completed the low-coupling package, which is the code of the difficulty and essence;

I really can't restrain my inner worship, these lines of code are so beautiful.

PS: Above JS Why use prop instead of attr, because: if the current input in the initialization of undefined checked attribute, then the element does not have the specified checked attribute, so. attr () will return undefined;

• For HTML elements that have intrinsic properties, use the Prop method when processing.
• For HTML elements our own custom DOM properties, when processing, use the Attr method.

　　

jquery Implementation list check box select all anti-select feature Package