版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38627581/article/details/78730976
注:
1.参数两个,第一个参数为全选按钮的选择器,第二个参数为除全选按钮外的其他复选框的父元素的选择器,如果其父元素为table,选择器要写为 "table tbody"。
2.可有部分按钮禁用(disabled),例如
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<input type="checkbox" class="allChecked"/>
全选
</div>
<ul class="asdf">
<li>
<input type="checkbox"/>
</li>
<li>
<input type="checkbox"/>
</li>
<li>
<input type="checkbox" disabled/>
</li>
<li>
<input type="checkbox"/>
</li>
<li>
<input type="checkbox"/>
</li>
</ul>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
/**
* 全选功能
* @param
* allClass 全选按钮选择器
* tableClass 包含除全选按钮之外多有复选框的父元素选择器
*/
function allChecked(allClass, tableClass) {
tableStr = tableClass;
tableStr += " input[type=checkbox]";
notTableStr = tableClass;
notTableStr += " input[type=checkbox][disabled]";
checkedStr = tableClass;
checkedStr += " input[type=checkbox]:checked";
$(allClass).unbind("click");
$(allClass).prop("checked", false);
$(allClass).bind("click",function() {
var status = this.checked;
$(tableStr).not(notTableStr).each(function(i, dom){
$(dom).prop("checked", status);
});
});
$(tableStr).not(notTableStr).click(function() {
if($(allClass).is(":checked") && !$(this).is(":checked")) {
$(allClass).prop("checked",false);
}
var allLength = $(tableStr).not(notTableStr).length;
if($(checkedStr).length == allLength) {
$(allClass).prop("checked", true);
}
});
}
allChecked(".allChecked", ".asdf");
</script>
</html>