复选框全选-优快云博客

本文介绍了一种使用jQuery实现表格中复选框联动的方法。具体实现方式为：当点击表格任意一行的第一列单元格时，会触发对该行内复选框的状态检查，并更新全选按钮的状态；反之亦然，当全选按钮被点击时，所有行内的复选框状态也会相应改变。

<div class="iteye-blog-content-contain" style="font-size: 14px">

$('#user_list tbody').on( 'click', ' td', function () {
if($(this).index()==0){
if($("#user_list input:not(:checkbox:checked)").length<1){
$('#mainCheckbox1').prop('checked', true);
}else{
$("#mainCheckbox1").removeAttr("checked");
}
}
});

function checkAll() {
// 当点击后复选框如果变为选中状态所执行的逻辑
if ($(this).prop('checked') == true) {

// 将head和foot区域中的两个复选框置为选中状态
$('#user_list thead :checkbox').prop('checked', true);

// 将表格body区域中的所有复选框置为选中状态
$('#user_list tbody :checkbox').each(function(index, element) {
$(element).prop('checked', true);
});
} else {
// 将表格head和foot区域中的两个复选框置为没有选中的状态
$('#user_list thead :checkbox').prop('checked', false);

// 将表格body区域中的两个复选框置为没有选中的状态
$('#user_list tbody :checkbox').each(function(index, element) {
$(element).prop('checked', false);
});
}
}

</div>