HTML
<!-- 全选 -->
<div class="platIdContainerHeader">
<input type="checkbox" id="ckSelectAll" οnclick="cli('platId')"/>
<label for="ckSelectAll">全选</label>
</div>
JS
function cli(Obj) {
var coll = document.getElementsByName(Obj);
// 判断“全选”多选框是否勾选
var ifCk = $("#ckSelectAll").is(":checked");
if (ifCk) {
for (var i = 0; i < coll.length; i++) {
coll[i].checked = true;
}
} else {
for (var i = 0; i < coll.length; i++) {
coll[i].checked = false;
}
}
}
注:判断 checkbox是否选中,使用Jquery
$("#ckSelectAll").is(":checked")
使用Jquery选中指定复选框:
$("#ckSelectAll").attr("checked",true);
如果子复选框发生变化、对“全选”复选框进行对应的处理
$(document).ready(function() {
// 监控,如果有一个多选框没有选,就取消“全选按钮”
$(".platIdCls").click(function() {
var ifCk = $(this).is(":checked");
// 判断用户点击的那个多选框,是否选中
if (!ifCk) {// 如果没有选中
// 取消“全选”
$("#ckSelectAll").attr("checked", false);
$("#ckSelectAll").attr("value", "0");
} else {// 如果点击选中
// 获取指定name的所有复选框
var coll = document.getElementsByName("platId");
var ifAllSeled = true;
// 对指定name的复选框进行遍历
for (var i = 0; i < coll.length; i++) {
// 如果有一个没有选中的,说明没有全选
if (!coll[i].checked) {
ifAllSeled = false;
break;
}
}
if (ifAllSeled) {
console.log("全选了");
$("#ckSelectAll").attr("checked", true);
// 给全选框一个值,1表示已选
$("#ckSelectAll").attr("value", "1");
} else {
console.log("没有全选");
}
}
});
});