input checkbox复选框全选与不全选方法封装如下：
html代码：
<table class="yt-table check-test-tab" style="840px;margin: 20px auto;">
<thead class="yt-thead">
<tr>
<th>
<lable class="check-label yt-checkbox parent-check">
<input type="checkbox" class="check-all" name="test" />
</lable>
</th>
<th>预算编号</th>
<th>预算表名称</th>
</tr>
</thead>
<tbody class="yt-tbody">
<tr>
<td>
<lable class="check-label yt-checkbox">
<input type="checkbox" name="test" />
</lable>
</td>
<td>T27</td>
<td>预算总表</td>
</tr>
<tr>
<td>
<lable class="check-label yt-checkbox">
<input type="checkbox" name="test" />
</lable>
</td>
<td>T28</td>
<td>人员支出</td>
</tr>
<tr>
<td>
<lable class="check-label yt-checkbox">
<input type="checkbox" name="test" />
</lable>
</td>
<td>T29</td>
<td>住房改革支出1</td>
</tr>
<tr>
<td>
<lable class="check-label yt-checkbox">
<input type="checkbox" name="test" />
</lable>
</td>
<td>T30</td>
<td>住房改革支出2</td>
</tr>
<tr>
<td>
<lable class="check-label yt-checkbox">
<input type="checkbox" name="test" />
</lable>
</td>
<td>T31</td>
<td>公用支出</td>
</tr>
</tbody>
</table>
js代码：
<script type="text/javascript">
(function($){
$.fn.extend({
/**
* 设置多选
* @param {Object} obj string类型参数
*/
setCheckBoxState:function(obj){
/**
* 判断状态 check(选中),
* uncheck(取消选中),
* disabled(禁用),
* undisabled(取消禁用),
* half(半选)
*/
if(obj == "check"){
$(this).parent().addClass("check");
$(this)[0].checked = true;
}else{
$(this).parent().removeClass("check");
}
/**
* 取消选中
*/
if(obj == "uncheck"){
$(this).parent().removeClass("check");
$(this)[0].checked = false;
//清楚禁用样式
$(this).parent().removeClass("yt-check-disabled");
}
/**
* 禁用
*/
if(obj == "disabled"){
$(this)[0].disabled=true;
$(this)[0].checked = false;
$(this).parent().addClass("yt-check-disabled");
}
/**
* 取消禁用
*/
if(obj == "undisabled"){
$(this)[0].disabled=false;
$(this).parent().removeClass("yt-check-disabled");
}
/**
* 半选
*/
if(obj == "half"){
$(this).parent().addClass("yt-checkbox-half");
}else{
$(this).parent().removeClass("yt-checkbox-half");
}
/**
*全选
*/
if(obj == "checkAll"){
//设置当前对象下面的复选框选中
$(this).find(".yt-checkbox").addClass("check");
$(this).find('input[type="checkbox"]').prop("checked",true);
}
/**
*反选
*/
if(obj == "unCheckAll"){
//设置当前对象下面的复选框选中
$(this).find(".yt-checkbox").removeClass("check");
$(this).find('input[type="checkbox"]').prop("checked",false);
}
},
})
})(jQuery)
</script>
<script type="text/javascript">
var checkBox = {
init:function(){
checkBox.events();
},
events:function(){
//全选
$(".parent-check").change(function(){
//判断自己是否被选中
if($(this).hasClass("check")){
//设置反选
$("table tbody").setCheckBoxState("unCheckAll");
}else{
//调用设置选中方法,全选
$("table tbody").setCheckBoxState("checkAll");
}
});
//表格中复选框操作
$("table tbody .yt-checkbox").change(function(){
//获取区域复选框数量,用来比较
var tableCheckLen = $("table tbody .yt-checkbox").length;
if($(this).hasClass("check")){
//取消全选
$("input.check-all").prop("checked",false).setCheckBoxState("uncheck");
}else{
//设置当前复选框选中
$(this).find("input").setCheckBoxState("check");
//比对选中的复选框数量和区域内复选框数量
if($("table tbody .yt-checkbox.check").length == tableCheckLen){
//设置反选
$("input.check-all").prop("checked",true).setCheckBoxState("check");
}
}
});
}
}
$(function(){
checkBox.init();
})
</script>
效果如图：
