Enable select All and deselect all

Click "Select All Boss" to achieve the full selection, click again to deselect all, and so on.

The HTML code is immutable:

<DivID= "MyCheckBox">     <inputtype= "checkbox"ID= "SelectAll"><BR>     <inputtype= "checkbox"><BR>     <inputtype= "checkbox"><BR>     <inputtype= "checkbox"><BR>     <inputtype= "checkbox"><BR></Div><DivID= "Anotherdiv">     <inputtype= "checkbox"></Div>

A few days ago in the project my practice is to define a variable in JS, every click SelectAll this variable is increased by 1, and then by judging the parity of the variable to achieve full selection and deselect all. There are two problems with this:

1, the use of this variable from 1 to judge the practice is very naïve, followed by the slow contact with jquery can be replaced by a practice;

2. Implement select All if you do this $ ("#mycheckbox input"). attr ("Checked", true); and the answer I see on the web is mostly this way, but there's a problem with it, and when the third click SelectAll, the Select all fails. After further Baidu, to do so: $ ("#mycheckbox input"). Prop ("checked", true); There is no problem in doing so. attr is best done with custom attributes, and prop operates on its own intrinsic properties.

Select all and deselect all depends on the ID selectall that check box two click State, think can be solved with toggle, so that all select and deselect all the implementation code in toggle put two function switch implementation, However, two problems were found after using toggle: The check button that binds the toggle event is flashed after the page has been refreshed-- 1.9 deleted the toggle

$ (function() {    $ ("#selectAll"). Toggle (function() {        $ ("#mycheckbox Input "). Prop (" Checked ",true);        Alert (this). Is (": Checked"));    },function() {        $ ("# MyCheckBox input "). Prop (" Checked ",false);    })})

After clicking on SelectAll, it is checked by itself:

When you click OK on the Warning box, your check status disappears:

Baidu has the answer to this question: this is because the default action is blocked in the toggle method . In the jquery source code, toggle called Event.preventdefault () when registering the click, which prevents the default action. However, the default action of clicking SelectAll is that its state becomes selected, and this action is toggle blocked, so the final SelectAll is not checked.

So just use the click to implement it.

$ (function() {    $ ("#selectAll"). Bind (' click ',function() {        var $allSelect = $ ("#mycheckbox input");         // if SelectAll is selected        if ($ (this). Is (": Checked")) {            $allSelect. Prop (' checked ',true);        }         Else {            $allSelect. Prop (' checked ',false);}}    )})

When the first click on the SelectAll, it is already selected, logic should not be mistaken.

Enable select All and deselect all