input checkbox复选框全选与部分选中效果

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>
效果如图：

转载于:https://www.cnblogs.com/lingdu87/p/9635823.html