All-in, inverse, and no-select functions for jquery

Html

We have a list of songs on our page that lists the names of multiple lines of songs, matches the checkboxes for the user to select, and a row of action buttons below the list.

<ul id="List"> <li><label><input type="checkbox"Value="1">1Where did all the time go? </label></li> <li><label><input type="checkbox"Value="2">2. Sky </label></li> <li><label><input type="checkbox"Value="3">3. Really love you </label></li> <li><label><input type="checkbox"Value="4">4. No hesitation </label></li> <li><label><input type="checkbox"Value="5">5. Glorious years </label></li> <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="all do not choose" class="btn"Id="unselect"> <input type="Button"Value="Inverse Selection" class="btn"Id="Reverse"> <input type="Button"Value="get all the values selected" class="btn"Id="GetValue">

Of course, don't forget to load the jquery library file first:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

Jquery

1, select All or not. When the check box #all next to the Select All button #selectall is checked, the options in the list are all selected, and the options in the list are unchecked if 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 All button #selectall or check the box next to the Select All button #all, all the options in the list are selected, including the check box next to select All selected.

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

3, all do not choose. When you click the Select All button #unselect, all the options in the list are unchecked, including #all, of course.

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

4, anti-election. When you click the #reverse button, all selected options in the list become unchecked, and all unchecked options become selected, and of course you should be aware of the #all status.

$ ("#reverse"). Click (function () {      $ ("#list: CheckBox " ). each (function () {           $ (this). attr ("checked",!$(  this). attr ("checked");       });     

The above code iterates over the list of options, then changes the Checked property, calls the function Allchk () What is doing, do not worry, stay behind the introduction.

5 to get all values selected. We have to interact with the daemon and we have to get the value of the selected item in the list, by iterating through the array, storing the values of the selected items in the array, and finally forming a string separated by commas (,) that the developer can manipulate by getting the string.

 $ (  #getValue    var  Valarr     = new   Array; $ (   #list: checkbox[checked]  Span style= "color: #800000;" > " ). each (function (i) {Valarr[i]  = $ (thi     s  ). Val ();     });  var  vals = valarr.join ( " ,  ); //  convert to comma-separated string   alert (vals);}); 

In order to improve the selection function, when we click on an option in the list, if the checked item just satisfies all the selected criteria, then the #all should also be selected, similarly, if all the previous options are selected, then #all should be unchecked when an option is unchecked.

$ ( "#list: CheckBox"). Click (function () {      

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

function Allchk () {varChknum = $ ("#list: CheckBox"). Size ();//total number of options    varCHK =0; $("#list: CheckBox"). each (function () {if($( This). attr ("checked")==true) {chk++;     }     }); if(CHKNUM==CHK) {//Select All$("#all"). attr ("checked",true); }Else{//not select all$("#all"). attr ("checked",false); } }

Summarize

The selection and unchecked state of the jquery action check box is very simple, using attr () to set the value of the Checked property, true unchecked, false to unchecked, the selection of the Select all check box selected during the entire select, reverse selection process, and the value of the selected option. Here I have all the jquery code together for your reference.

$ (function () {//Select All or do not select all$("#all"). Click (function () {if( This.checked){                $("#list: CheckBox"). attr ("checked",true); }Else{                $("#list: CheckBox"). attr ("checked",false);      }         }); //Select All$("#selectAll"). Click (function () {$ ("#list: checkbox, #all"). attr ("checked",true);       }); //all do not choose$("#unSelect"). Click (function () {$ ("#list: checkbox, #all"). attr ("checked",false);       }); //Inverse Selection$("#reverse"). Click (function () {$ ("#list: CheckBox"). each (function () {$ ( This). attr ("checked", !$( This). attr ("checked"));          });     Allchk ();          }); //Set the Select all check box$("#list: CheckBox"). Click (function () {allchk ();       }); //gets the value of the selected option$("#getValue"). Click (function () {varValarr =NewArray; $("#list: checkbox[checked]"). Each (function (i) {valarr[i]= $( This). Val ();         }); varVals = Valarr.join (',');     alert (Vals); });  }); function Allchk () {varChknum = $ ("#list: CheckBox"). Size ();//total number of options    varCHK =0; $("#list: CheckBox"). each (function () {if($( This). attr ("checked")==true) {chk++;     }     }); if(CHKNUM==CHK) {//Select All$("#all"). attr ("checked",true); }Else{//not select all$("#all"). attr ("checked",false); } } 

Disclaimer: This article is original article, helloweba.com and author have copyright, if need to reprint, please indicate from helloweba.com and keep original link: http://www.helloweba.com/view-blog-254.html

All-in, inverse, and no-select features of jquery