JQuery Selects all, invert, and deselected functions.

JQuery Selects all, invert, and deselected functions.

This method is applicable to scenarios where multiple webpage selections require batch operations (such as batch deletion ). If you have any questions, please let us know. Thank you ~~

HTML

There is a list of songs on our page, listing the names of multiple songs and matching the check boxes for users to choose from, and there is a row of operation buttons below the list

<Ul id = "list"> <li> <label> <input type = "checkbox" value = "1"> 1. where is the time? </label> </li> <label> <input type = "checkbox" value = "2"> 2. sea sky </label> </li> <label> <input type = "checkbox" value = "3"> 3. really love you </label> </li> <label> <input type = "checkbox" value = "4"> 4. do not hesitate </label> </li> <label> <input type = "checkbox" value = "5"> 5. glorious years </label> </li> <label> <input type = "checkbox" value = "6"> 6. like 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">

Of course, do not forget to load the jQuery library file first:

JQuery Baidu CDN

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

Jquery supports versions 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

JQuery

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 above code traverses the option list, then changes the checked attribute, and calls the function allchk () to do what it is. Don't worry, just stay in the next section.

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 );}}

Examples of the functions of jQuery:

<! Doctype html> 

Select all or none of the check boxes for Jquery implementation
<Input type = "checkbox" name = "fruit" value = "apple"/> apple
<Input type = "checkbox" name = "fruit" value = "orange"/> orange
<Input type = "checkbox" name = "fruit" value = "banana"/> banana
<Input type = "checkbox" name = "fruit" value = "grape"/> grape
<Input type = "button" id = "btn1" value = "select all">

$ (Function (){
$ ('# Btn1'). click (function () {// select all
$ ("[Name = 'fruit']"). attr ('checked', 'true ');
});
Is that true?

How to solve compatibility problems when using jquery to achieve full selection and invert Selection
JQuery. fn. extend ({
Select: function (params ){
$ (This). click (function (){
$ ("[Name = '" + params + "']"). attr ("checked", $ (this). attr ("checked "));
});
}
});