Select all, uncheck, and reverse actions for the effect check box

Name implies.

Simple effect:

HTML :

<div class= "Con" >

<div class= "box" >

<p><input type= "checkbox" class= "check_kid" > Option one </p>

<p><input type= "checkbox" class= "check_kid" > Option two </p>

<p><input type= "checkbox" class= "check_kid" > option three </p>

<p><input type= "checkbox" class= "Check_kid" > option four </p>

<p><input type= "checkbox" class= "Check_all" > select All/Select All </p>

</div>

<div class= "box" >

<p><input type= "checkbox" class= "check_kid_2" > Option one </p>

<p><input type= "checkbox" class= "check_kid_2" > Option two </p>

<p><input type= "checkbox" class= "check_kid_2" > option three </p>

<p><input type= "checkbox" class= "check_kid_2" > option four </p>

<p><input type= "button" value= "Reverse Selection" class= "Check_other" ></p>

</div>

<div class= "box" >

<table class= "Check_table" >

<tr>

<td><input type= "checkbox" class= "Check_line" name= "Check_1" > select all 1 Rows </td>

<td><input type= "checkbox" class= "Check_one" name= "Check_1" > Options 11</td>

<td><input type= "checkbox" class= "Check_one" name= "Check_1" > Options 12</td>

<td><input type= "checkbox" class= "Check_one" name= "Check_1" > Options 13</td>

</tr>

<tr>

<td><input type= "checkbox" class= "Check_line" name= "Check_1" > select all 2 rows </td>

<td><input type= "checkbox" class= "Check_one" name= "Check_1" > Options 21</td>

<td><input type= "checkbox" class= "Check_one" name= "Check_1" > Options 22</td>

<td><input type= "checkbox" class= "Check_one" name= "Check_1" > Options 23</td>

</tr>

<tr>

<TD colspan= "4" ><input type= "checkbox" class= "check_all_2" > select All/Select All </td>

</tr>

</table>

</div>

<br><br><br>

</div>

CSS :

. con{width:1000px; margin:0 Auto;}

. con h1{text-align:center; font-weight:normal;}

h1,h2{font-weight:normal; color: #0CC;}

ul{margin:0; padding:0; list-style:none;}

. box{border:1px solid #0C9; padding:20px; margin:20px;}

. check_table{width:100%; border-collapse:collapse; border-spacing:0;}

. check_table td{border:1px solid #ccc; height:50px; padding:0 10px;}

JS :

$ (document). Ready (function () {

Single Control Select All

$ (". Check_kid"). Click (function () {

var num1=$ (". Check_kid"). Length;

var num2=$ (". check_kid:checked"). Length;

if (num1==num2)

{

$ (". Check_all"). Prop ("checked", true);

}

else{

$ (". Check_all"). Prop ("checked", false);

}

});

$ (". Check_all"). Click (function () {

$ (". Check_kid"). Prop ("Checked", this.checked);

});

Inverse selection

$ (". Check_other"). Click (function () {

$ (". Check_kid_2"). each (function () {

this.checked=!this.checked;

});

});

Control of the Bank

$ (". Check_one"). Click (function () {

var check_tr=$ (this). Closest ("tr");

var num11=$ (". Check_one", check_tr). length;

var num22=$ (". check_one:checked", check_tr). length;

var check_line=$ (this). Parents (' tr '). Find (". Check_line");

if (NUM11==NUM22) {

Check_line.prop ("Checked", true);

}

else{

Check_line.prop ("Checked", false);

}

});

$ (". Check_line"). Click (function () {

check_one=$ (This). Parents (' tr '). Find (". Check_one");

Check_one.prop ("Checked", this.checked);

});

Control all

$ ("[name= ' Check_1 ']"). Click (function () {

var num111=$ ("[Name= ' Check_1 ']"). Length;

var num222=$ ("[Name= ' Check_1 ']:checked"). Length;

if (num111==num222) {

$ (". Check_all_2"). Prop ("checked", true);

}

else{

$ (". Check_all_2"). Prop ("checked", false);

}

});

$ (". Check_all_2"). Click (function () {

$ ("[name= ' Check_1 ']"). Prop ("Checked", this.checked);

});

});

Effect preview: http://www.gbtags.com/gb/rtreplayerpreview-standalone/2855.htm

SOURCE Download: Http://pan.baidu.com/s/1kUIG8cB

Select all, uncheck, and reverse actions for the effect check box