1. Example 1:
<form> What's your favorite sport? <input type= "checkbox" id= "Checkedall"/> Select all <br/> <input type= "checkbox" id= "Checkedno"/> Select All <br/> <input type= "checkbox" id= "Checkedrev"/> Reverse selection <br/> <input type= "checkbox" Name= "Items" value= "soccer"/> Soccer <input type= "checkbox" name= "items" value= "basketball"/> Basketball <input type= "checkbox "Name=" Items "value=" Badminton "/> Badminton <input type=" checkbox "name=" Items "value=" Table tennis "/> Table tennis <input Type = "button" id= "Send" value= "commit"/></form>
Select All
$ ("#checkAll"). Click (function () {
$. ("[Name=items]: CheckBox"). attr ("Checked", true);
})
Not selected at all:
$ ("#checkAll"). Click (function () {
$. ("[Name=items]: CheckBox"). attr ("checked", false);
})
Inverse selection:
$ ("#checkRev"). Click (function () {
$. ("[Name=items]: CheckBox"). each (function () {
$ (this). attr ("Checked",!$ (This). attr ("checked"));
})
})
JS native DOM methods are more efficient and concise than creating jquery objects, and the following code is simplified:
$ ("#checkRev"). Click (function () {
$. ("[Name=items]: CheckBox"). each (function () {
this.checked=!this.checked;
})
})
2. Example 2:
<form> What's your favorite sport? <input type= "checkbox" id= "Checkedall"/> Select All/Select All <br/> <input type= "checkbox" name= "Items" Value= "soccer"/> Soccer <input type= "checkbox" name= "items" value= "basketball"/> Basketball <input type= "checkbox" Name= " Items "value=" Badminton "/> Badminton <input type=" checkbox "name=" Items "value=" Table tennis "/> Table tennis <input type=" Button "id=" Send "value=" commit "/></form>
When you click the Checkedall check box, the check box group is selected, and when one or more of the check box groups is not selected, you need to cancel the selected state with the id "Checkedall" as follows:
A) Set a full-checked/Unchecked flag bit, select the status according to the flag bit setting "Checkedall" check box
$ ("[Name=items]:checkbox"). Click (function () {
var flag = true;
$ ("[Name=items]:checkbox"). each (function () {
if (!this.checked) {
Flag = false;
}
});
$ ("#CheckAll"). attr ("checked", flag);
})
b) Determine whether the total number of check boxes is equal to the number of check boxes selected
$ ("[Name=items]:checkbox"). Click (function () {
var $temp = $ ("[Name=items]:checkbox");
$ ("#CheckAll"). attr ("Checked", $temp. length== $temp. Filter (": Checked"). length);
})
jquery App Action---check box