Home > Developer > Web Develop
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Multi Box Select all/Reverse </title>
<script src= "Http://res01.xesimg.com/jquery/jquery.min.js" ></script>
<body>
<div class= "Demo" >
<ul id= "List" >
<li><label><input type= "checkbox" value= "1" > 1. Where did 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 more 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= "Get all Values selected" class= "btn" id= "GetValue" >
</div>
</body>
<script type= "Text/javascript" >
Select All or do not select all
$ ("#all"). Click (function () {
Console.log (this.checked)
if (this.checked) {
$ ("#list: CheckBox"). Prop ("checked", true);
}else{
$ ("#list: CheckBox"). Prop ("checked", false);
}
});
Set the Select all check box
$ ("#list: CheckBox"). Click (function () {
Allchk ();
});
Gets the value of the selected option
$ ("#getValue"). Click (function () {
var valarr = new Array;
$ ("#list input[type=checkbox]:checked"). each (function (i) {
Valarr[i] = $ (this). Val ();
});
var vals = Valarr.join (', ');
alert (Vals);
});
function Allchk () {
var chknum = $ ("#list: CheckBox"). Size ();//total number of options
var chk = 0;
$ ("#list: CheckBox"). each (function () {
if (this.checked) {
chk++;
}
});
if (CHKNUM==CHK) {//Select all
$ ("#all"). Prop ("checked", true);
}else{//not select all
$ ("#all"). Prop ("checked", false);
}
}
</script>
jquery for full Select/Reverse selection function
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
