jquery full selection, no selection, reverse selection, get all values selected summary

Last Update:2016-10-08 Source: Internet

Author: User

Tags jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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.

<!doctype html>
<meta charset= "UTF-8" >
<title>checkbox2</title>
<style>
Li {
List-style:none;
}
</style>
<script src= "Js/jquery-1.7.2.min.js" ></script> <!--be sure to refer to the jquery library file--
<body>
<ul id= "List" >
<li><label><input type= "checkbox" value= "1" > 1. Dream a game </label></li>
<li><label><input type= "checkbox" value= "2" > 2. Sky </label></li>
<li><label><input type= "checkbox" value= "3" > 3.Let It go</label></li>
<li><label><input type= "checkbox" value= "4" > 4. No more hesitation </label></li>
<li><label><input type= "checkbox" value= "5" > 5. Glorious years </label></li>
<li><label><input type= "checkbox" value= "6" > 6. Foam </label></li>
</ul>
<input type= "checkbox" id= "All" >
<input type= "button" value= "Select All" class= "btn" id= "SelectAll" >
<input type= "button" value= "All not selected" class= "btn" id= "Unselect" >
<input type= "button" value= "Reverse Selection" class= "btn" id= "reverse" >
<input type= "button" value= "Get all Values selected" class= "btn" id= "GetValue" >
</body>
JQuery

****

JQuery Event-Ready () methodThere are two kinds:

$ (document). Ready (function () {});

$ (function () {});

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.

Select all, not select all

$ ("#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.

Select All

$ ("#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.

All do not choose

$ ("#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.

Counter-Select each traversal

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

The above code iterates through the list of options, then changes the Checked property, calls the function Allchk () What is doing, do not worry, stay behind the introduction (this part and the next content did not get too clear, welcome expert reviews).

5. Get all the 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"). 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 join flattening
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(){allchk();});

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

function allchk(){var chknum = $("#list :checkbox").size();//选项总个数var chk = 0;$("#list :checkbox").each(function () {          if($(this).attr("checked")==true){chk++;}    });if(chknum==chk){//全选$("#all").attr("checked",true);}else{//不全选$("#all").attr("checked",false);}}


Disclaimer: The article originates from helloweba.com and retains the original link: http://www.helloweba.com/view-blog-254.html

jquery full selection, no selection, reverse selection, get all values selected summary

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More