不支持ajax的全选按钮
$(function(){
//全选的改变事件
$("#selectAllBox").change(function() {
var flag = $(this).is(":checked");
if (flag) {
$('input[name="selectBox"]').each(function() {
$(this).prop("checked", true);
});
} else {
$('input[name="selectBox"]').each(function() {
$(this).removeAttr("checked", false);
});
}
});
$('input[name="selectBox"]').change(function() {
$('input[name="selectBox"]').each(function() {
if ($(this).is(":checked")) {
return;
} else {
$("#selectAllBox").removeAttr("checked", false);
}
});
var lengthSelected = $('input[name="selectBox"]:checked').length;
var length = $('input[name="selectBox"]').length;
if (lengthSelected == length) {
$("#selectAllBox").prop("checked", true);
}
});
});
支持ajax加载
//监听员工子复选框按钮
$(document).on('click', 'input[name="selectEmp"]',function () {
//点击取消
if (this.checked === false) {
$("#selectAllEmp:first").prop('checked', false)
}
//点击选中
else {
let nocheckedList = $("#empContent").find(":checkbox:not(:checked)").length;
if (nocheckedList === 0) {
$("#selectAllEmp:first").prop('checked', true)
}
}
});
// 员工全选/取消
$(document).on('change', '#selectAllEmp',function () {
let check = this.checked;
if (check) {
/* * prop() 方法设置或返回被选元素的属性和值。 * 当该方法用于返回属性值时,则返回第一个匹配元素的值。 * 当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。 * 根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr() * */
$("#empContent").find(":checkbox").prop('checked', true)
} else {
$("#empContent").find(":checkbox").prop('checked', false)
}
});