JQuery Selects all the check boxes (checkbox), does not select all, reselect and other operations, jquerycheckbox
Effect:
HTML code:
<Body>
<Ul id = "list">
<Li> <label> <input type = "checkbox" name = "items" value = "1"> 1. Where has time been? </label> </li>
<Li> <label> <input type = "checkbox" name = "items" value = "2"> 2. Sea sky </label> </li>
<Li> <label> <input type = "checkbox" name = "items" value = "3"> 3. Love you </label> </li>
<Li> <label> <input type = "checkbox" name = "items" value = "4"> 4. Do not hesitate </label> </li>
<Li> <label> <input type = "checkbox" name = "items" value = "5"> 5. glorious years </label> </li>
<Li> <label> <input type = "checkbox" name = "items" value = "6"> 6. Like you </label> </li>
</Ul>
<Input type = "checkbox" id = "all"> select all or not </br>
<Input type = "button" value = "select all" class = "btn" id = "selectAll">
<Input type = "button" value = "NONE" class = "btn" id = "unSelect">
<Input type = "button" value = "invert" class = "btn" id = "reverse">
<Input type = "button" value = "get all selected values" id = "btn" id = "getValue">
</Body>
Jquery code:
<Script type = "text/javascript">
$ (Function (){
// Select all/do not select all
$ ("# All"). click (function (){
$ ("[Name = items]: checkbox"). attr ("checked", this. checked );
});
$ ("[Name = items]: checkbox"). click (function (){
Var flag = true;
$ ("[Name = items]: checkbox"). each (function (){
If (! This. checked ){
Flag = false;
}
});
$ ("# All"). attr ("checked", flag );
})
// Select all
$ ("# SelectAll"). click (function (){
$ ("[Name = items]: checkbox"). each (function (){
$ (This). attr ("checked", true );
});
});
// None
$ ("# UnSelect"). click (function (){
$ ("[Name = items]: checkbox"). each (function (){
$ (This). attr ("checked", false );
});
});
// Invert Selection
$ ("# Reverse"). click (function (){
$ ("[Name = items]: checkbox"). each (function () {// traverse each check box
// $ (This). attr ("checked ",! $ (This). attr ("checked"); // obtain the reverse value of the check box using the jQuery Method
This. checked =! This. checked; // js method
});
});
// Output the selected value
$ ("# Btn"). click (function (){
Var str = "you selected: \ r \ n ";
$ ("[Name = items]: checkbox: checked"). each (function (){
Str + = $ (this). val () + "\ r \ n ";
});
Alert (str );
});
})
</Script>
Note: Due to changes to the jquery version, the new version can only be clicked once. The old version is acceptable. The new version cannot be selected using attr, the first solution is to use the js native method this. checked = true/false;
The second solution is to replace attr with prop.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
