复选框全选

最新推荐文章于 2024-08-07 14:51:40 发布

yangyanjava

最新推荐文章于 2024-08-07 14:51:40 发布

阅读量107

点赞数

分类专栏：前端文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/yangyanjava/article/details/84724426

版权

前端专栏收录该内容

32 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>

复选框 全选

复选框全选