A simple example of how to use a checkbox in jquery demo _jquery

and share a section based on jquery to implement a checkbox list of all Select, reverse and optional features of the code, for the Web page after multiple selection of the need for bulk operation of the scene (such as bulk deletion, etc.). The article unifies the example, the code is concise, the basic coverage option selects the operation each aspect, hoped may help to have the need the front-end development amateur.

Introducing the jquery Library
<script src= "Ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
Building HTML

Generally read from the database list will need to bulk select in order to delete and edit, and so on, we will simulate, the implementation of CheckBox checkbox of the full selection and not selected, first set up HTML

 <ul id= "list" > <li><label><input type= "checkbox" value= "1" > 1. I'm on the record. </label></li> <li><label><input type= "checkbox" value= "2" > 2. Haha, really naïve </ label></li> <li><label><input type= "checkbox" value= "3" > 3. Is it my fault to fall in love with you? </label></li> <li><label><input type= "checkbox" value= "4" > 4. You never used to love me from the start </label ></li> <li><label><input type= "checkbox" value= "5" > 5. It's hard to like a man </label></li> & Lt;li><label><input type= "checkbox" value= "6" > 6. Where are you? </label></li> </ul> < Input type= "checkbox" id= "All" > <input type= "button" value= "Select All" class= "btn" id= "SelectAll" > <input type= "bu Tton "value=" class= "btn" id= "unselect" > <input type= "button" value= "reverse" class= "btn" id= "reverse" > <INP UT type= "button" value= "Get All selected Values" class= "btn" id= "GetValue" > 

JQuery Code

1, select All or all do not choose. When the check box next to the #selectall button is #all, all the options in the list are selected, whereas the options in the list are unchecked.

$ ("#all"). Click (function () { 
 if (this.checked) { 
  $ ("#list: CheckBox"). attr ("Checked", true); 
 else{ 
  $ ("#list: CheckBox"). attr ("checked", false); 
 } 
);

2, select All. When you click the Select button #selectall or check box next to the #all button, all the options in the list are selected, including the check box next to the full selection.

$ ("#selectAll"). Click (function () { 
 $ ("#list: CheckBox, #all"). attr ("Checked", true); 

3, all do not choose. when the #unselect button is clicked, all of the options in the list are unchecked, including, of course, the #all and unchecked state.

$ ("#unSelect"). Click (function () { 
 $ ("#list: CheckBox, #all"). attr ("checked", false); 

4, reverse election. when the #reverse button is clicked, all selected options in the list become unchecked, and all unselected options become selected, and of course note the status of the #all.

$ ("#reverse"). Click (function () { 
 $ (#list: checkbox). Each (the function () { 
  $ (this). attr ("Checked",!$ (This). attr ("checked")); 
 Allchk (); 
});

The code iterates through the list of options, then changes the Checked property, and finally calls the function Allchk (), which is described later.

5, get all the selected values. we have to interact with the daemon to get the value of the selected item in the list, we go through the array, the value of the selection is stored in the array, and finally a string separated by a comma (,), the developer can get the string to do the appropriate operation.

$ ("#getValue"). Click (function () { 
 var valarr = new Array; 
 $ ("#list: checkbox[checked]"). each (function (i) { 
  valarr[i] = $ (this). Val (); 
 }); 
 var vals = Valarr.join (', ');//convert to comma-separated string 
 alert (vals); 
});

To refine the selection feature, when we click an option in the list, if the checked items just satisfy all the selected conditions, then the #all will also change to the selected state, also, if all the options are selected in advance, when the cancellation of an option, then the #all will also become unchecked.

Set Select all check boxes 
$ ("#list: CheckBox"). Click (function () { 
 allchk (); 
});

The function Allchk () is used to detect whether the marquee #all should be selected or unchecked, see the code.

function Allchk () { 
 var chknum = $ ("#list: CheckBox"). Size ()//Option total number 
 var chk = 0; 
 $ ("#list: CheckBox"). each (the function () { 
  if ($ (this). attr ("checked") ==true) { 
   chk++; 
  } 
 ); 
 if (CHKNUM==CHK) {//Select all 
  $ ("#all"). attr ("Checked", true); 
 else{//Not all 
  $ ("#all"). attr ("checked", false); 
 } 

Summarize

The selection and unchecked state of the jquery action check box is very simple, use attr () to set the value of the "checked" property, True unchecked, false to unchecked, note the selection of the Select check box throughout the entire selection, the selection process, and get the value of the selected option. I'll put all the jquery code together for your reference.

$ (function () {//All or all optional $ ("#all"). Click (function () {if (this.checked) {$ ("#list: CheckBox"). attr ("Checked", tr 
  UE); 
  }else{$ ("#list: CheckBox"). attr ("checked", false); 
 } 
  }); 
 Select All $ ("#selectAll"). Click (function () {$ (#list: CheckBox, #all). attr ("Checked", true); 
 }); 
 Select All $ ("#unSelect"). Click (function () {$ (#list: CheckBox, #all). attr ("checked", false); 
 }); Reverse Select $ ("#reverse"). Click (function () {$ (#list: checkbox). each (function () {$ (this). attr ("Checked",!$ (This) 
   . attr ("checked")); 
   }); 
 Allchk (); 
  
 }); 
 Set Select all check boxes $ ("#list: CheckBox"). Click (function () {allchk (); 
 
 }); 
  Gets the value of the selected option $ ("#getValue"). Click (function () {var valarr = new Array; 
  $ ("#list: checkbox[checked]"). each (function (i) {valarr[i] = $ (this). Val (); 
  }); 
   var vals = Valarr.join (', '); 
 alert (Vals); 
}); 
}); 
 function Allchk () {var chknum = $ ("#list: CheckBox"). Size ()//Option Total number var chk = 0; $ ("#list: CheckBox"). each (functioN () {if ($ (this). attr ("checked") ==true) {chk++; 
 } 
 }); 
 if (CHKNUM==CHK) {//Select all $ ("#all"). attr ("Checked", true); 
 }else{//Not all $ ("#all"). attr ("checked", false); } 
}

Through this article I hope you have a general understanding of the use of the checkbox in jquery, and then through a large number of examples to skillfully grasp the use of the checkbox.