Jquery implements simple full-selection and inverse-selection functions, and jquery implements full-selection.

Jquery implements simple full-selection and inverse-selection functions, and jquery implements full-selection.

First, let's look at a simple example.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Next we will share with you a piece of code based on jQuery that implements the checkbox list full selection, reverse selection, and unselection functions. This is suitable for scenarios where multiple page selections require batch operations (such as batch deletion ). This article uses examples to simplify the code and covers all aspects of Option Selection operations. We hope this will help front-end developers who need it.
Introduce jquery Library
<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Construct HTML
Generally, the list read from the database needs to be selected in batches for deletion and editing. Next we will simulate the implementation of the check box checkbox to select all or not, first create an html
<Ul id = "list"> <li> <label> <input type = "checkbox" value = "1"> 1. I recorded it. </label> </li> <label> <input type = "checkbox" value = "2"> 2. haha, It's really naive </label> </li> <label> <input type = "checkbox" value = "3"> 3. is it my fault to fall in love with you? </Label> </li> <label> <input type = "checkbox" value = "4"> 4. from the beginning, you will not fall in love with me </label> </li> <label> <input type = "checkbox" value = "5"> 5. it is difficult to like a person </label> </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 =" button "value =" NONE "class =" btn "id =" unSelect "> <input type = ""button" value = "invert" class = "btn" id = "reverse"> <input type = "button" value = "get all selected values" class = "btn" id = "getValue">
JQuery code
1. Select all or none. When the Select all button # check box # all next to selectAll is selected, all the options in the list are selected. Otherwise, all the options in the list are not selected.
$("#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 all button # selectAll or select the check box # all next to the Select all button, all options in the list will be selected, including the check boxes next to select all are also selected.
$("#selectAll").click(function () {   $("#list :checkbox,#all").attr("checked", true);  });
3. All are not selected. When you click the unSelect button # unSelect, all the options in the list are unselected, including # all and not selected.
$("#unSelect").click(function () {    $("#list :checkbox,#all").attr("checked", false);  });
4. Invert selection. When you click the reselect button # reverse, all the selected options in the list change to the unselected status, and all the unselected options change to the selected status, of course, you must also note the # all status.
$("#reverse").click(function () {   $("#list :checkbox").each(function () {      $(this).attr("checked", !$(this).attr("checked"));    });   allchk(); });
The Code traverses the Option List, changes the checked attribute, and finally calls the function allchk (). This function will be introduced later.
5. Obtain all selected values. To interact with the background program, we must obtain the values of the options in the list. We traverse the array and store the values of the selected items in the array. The final composition is composed of commas (,) you can obtain the string to perform operations.
$ ("# GetValue "). click (function () {var valArr = new Array; $ ("# list: checkbox [checked]"). each (function (I) {valArr [I] = $ (this ). val () ;}); var vals = valArr. join (','); // convert to a comma-separated string alert (vals );});
To improve the selection function, when you click an option in the list, if the selected item meets all the selected conditions, # all must be selected accordingly. Similarly, if all the options in advance are selected, When you deselect an option, # all must change to the unselected status.
// Set the Select All check box $ ("# list: checkbox"). click (function () {allchk ();});
The function allchk () is used to check whether all is selected or not. Check the code.
Function allchk () {var chknum = $ ("# list: checkbox "). size (); // The total number of options 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 );}}
Summary
It is very easy to select and unselect the check boxes of jQuery operations. You can use attr () to set the value of the "checked" attribute. true is not selected, and false is not selected, during the entire selection and inverse selection process, pay attention to the Selection status of the all-selected check box and obtain the value of the selected option. Below I will organize all jQuery code for your reference.
$ (Function () {// select all or none $ ("# all "). click (function () {if (this. checked) {$ ("# list: checkbox "). attr ("checked", true);} else {$ ("# list: checkbox "). attr ("checked", false) ;}}); // select $ ("# selectAll "). click (function () {$ ("# list: checkbox, # all "). attr ("checked", true) ;}); // do not select $ ("# unSelect "). click (function () {$ ("# list: checkbox, # all "). attr ("checked", false) ;}); // reselect $ ("# reverse "). click (function (){ $ ("# List: checkbox"). each (function () {$ (this). attr ("checked ",! $ (This ). attr ("checked") ;}; allchk () ;}); // you can specify the check box $ ("# list: checkbox "). click (function () {allchk () ;}); // obtain 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 (); // The total number of options 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 );}}

Articles you may be interested in:

 

 
  
Select All and invert jquery check box CHECKBOX
 
  
Jquery checkbox: select all, deselect all, and select method 3.
 
  
All and invert selection implemented by jquery
 
  
Select All jquery input checked and Version 1.3.2.
 
  
Jquery CheckBox full selection method code attachment js checkbox full selection inverse selection code
 
  
Jquery implements code (ODD) for all functions such as checkbox selection, reverse selection, and no selection)
 
  
JQuery checks whether the checkbox (check box) is selected, selects all, and reselect the implementation code.
 
  
Check box for jQuery implementation select all/deselect all/reselect and obtain the selected value
 
  
The solution for executing all Jquery selections and reselect click once