input checkbox復選框全選與不全選方法封裝如下：
html代碼：
<table class="yt-table check-test-tab" style="width: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>
效果如圖：
