jquery implementation of the checkbox list of the full selection, the inverse of the selection function _jquery

When we do a list, we often encounter a full selection, and select the batch processing problem, such as:

I was a simple implementation, and then want to package to the public JS, the package is too bad, embarrassed posted (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 encapsulation), Then think of before the boss has written this function to see how he wrote, really no contrast there is no harm ah, this is called encapsulation;

$ (': Checkbox[data-check-target] '). Click (function () {
  var target = $ (this). attr (' Data-check-target ');
  if ($ (this). Prop (' checked ')) {
    $ (target). Prop (' checked ', true);
  } else {
    $ (target). Prop (' checked ', false );
  }
});

First of all, the high package here is reflected, only a custom Data-check-target property is used for the connection between JS and HTML after separation (and I used two: A full selection checkbox, a child check box, all the relevant points are used, so that does not have the effect of encapsulation, JS and HTML too much coupling (I see the above JS is thinking how to pass a connection point to three related things together);

Next we continue to look at the specific use of the place:

I found the Select checkbox for the custom properties of the bridge with JS Link data-check-target a little special:

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

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

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

It just dawned on me. The class name of the original child check box is stored in the custom attribute Data-check-target;

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

And then through the custom attribute data-check-target to get the Child checkbox class, so as to achieve high encapsulation;

My summary is that JS and HTML pass the custom attribute Data-check-target communication, the Child check box relies on the Select checkbox to customize the value of the property data-check-target;

This example looks down the code is not difficult, and there is no place difficult to understand, that is, through a custom attribute cleverly completed the low coupling of the package, which is precisely the difficulty and the essence of this code;

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

PS: Top JS Why use prop instead of attr because: if the Checked property is not defined in the current input, the element does not have the specified checked attribute, so. attr () returns undefined;

For the intrinsic properties of the HTML element itself, the prop method is used when processing. For our own custom DOM attributes for HTML elements, the attr method is used when processing.