【特效】复选框的全选、全不选、反选操作
顾名思义。
朴素效果截图：
html：
<div class="con">
<h1>复选框的全选、全不选、反选操作</h1>
<div class="box">
<h2>全选/全不选：</h2>
<p><input type="checkbox" class="check_kid"> 选项一</p>
<p><input type="checkbox" class="check_kid"> 选项二</p>
<p><input type="checkbox" class="check_kid"> 选项三</p>
<p><input type="checkbox" class="check_kid"> 选项四</p>
<p><input type="checkbox" class="check_all"> 全选/全不选</p>
</div>
<div class="box">
<h2>反选：</h2>
<p><input type="checkbox" class="check_kid_2"> 选项一</p>
<p><input type="checkbox" class="check_kid_2"> 选项二</p>
<p><input type="checkbox" class="check_kid_2"> 选项三</p>
<p><input type="checkbox" class="check_kid_2"> 选项四</p>
<p><input type="button" value="反选" class="check_other"></p>
</div>
<div class="box">
<h2>一行有多个：</h2>
<table class="check_table">
<tr>
<td><input type="checkbox" class="check_line" name="check_1"> 全选1行</td>
<td><input type="checkbox" class="check_one" name="check_1"> 选项11</td>
<td><input type="checkbox" class="check_one" name="check_1"> 选项12</td>
<td><input type="checkbox" class="check_one" name="check_1"> 选项13</td>
</tr>
<tr>
<td><input type="checkbox" class="check_line" name="check_1"> 全选2行</td>
<td><input type="checkbox" class="check_one" name="check_1"> 选项21</td>
<td><input type="checkbox" class="check_one" name="check_1"> 选项22</td>
<td><input type="checkbox" class="check_one" name="check_1"> 选项23</td>
</tr>
<tr>
<td colspan="4"><input type="checkbox" class="check_all_2"> 全选/全不选</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(){
//单一控制全选
$(".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);
});
//反选
$(".check_other").click(function(){
$(".check_kid_2").each(function(){
this.checked=!this.checked;
});
});
//控制本行
$(".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);
});
//控制所有
$("[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);
});
});
效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/2855.htm
源码下载：http://pan.baidu.com/s/1kUIG8cB
