jQuery实现全选全不选

最新推荐文章于 2024-05-13 02:03:57 发布

唯爱浅浅waqq914

最新推荐文章于 2024-05-13 02:03:57 发布

阅读量139

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_42028405/article/details/80019097

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在HTML表格中实现全选与单选功能的方法，并通过JavaScript代码实现了表格单元格点击触发复选框变化的功能。

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

HTML

<table id="deviceTb" class="myDataTableStyle">
        <thead>
        <tr>
            <th><input type="checkbox" name="cb-check-all"></th>
            <th></th>
            <th>设备</th>
            <th>厂商</th>
            <th>IP地址</th>
            <th>更新时间</th>
            <th>是否启用</th>
            <th>操作</th>
        </tr>
      </thead>
      <tr>
            <td class="td-checkbox"><input type="checkbox"></td>
            <td>111</th>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
    </table>

var $table = $('#deviceTb');
$table.on("change",":checkbox",function() {
        if ($(this).is("[name='cb-check-all']")) {
            //全选
            $(":checkbox",$table).prop("checked",$(this).prop("checked"));
        }else{
            //一般复选
            var checkbox = $("tbody :checkbox",$table);
            $(":checkbox[name='cb-check-all']",$table).prop('checked', checkbox.length == checkbox.filter(':checked').length);
        }
    }).on("click",".td-checkbox",function(event) {
        //点击单元格即点击复选框
        !$(event.target).is(":checkbox") && $(":checkbox",this).trigger("click");
    });

//换页时清空全选状态
$(":checkbox[name='cb-check-all']").prop('checked', false);