您的位置：首页 > Web前端 > JavaScript

全选功能的实现(兼容ie8，可以部分禁用)

2017-12-06 15:25 369 查看

注：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ie 8 javascript

相关文章推荐

新的分享

章节导航