JS 实现表格中checkbox（复选框）全选反选

最新推荐文章于 2024-12-06 11:41:20 发布

炒米像啥

最新推荐文章于 2024-12-06 11:41:20 发布

阅读量2.7k

点赞数 1

文章标签： js checkbox dom

本文链接：https://blog.csdn.net/chaomi_didi/article/details/109120880

版权

本文介绍了如何使用JavaScript实现表格中复选框的全选和反选功能。通过监听thead中的复选框状态，同步更新tbody中的复选框状态，并反之亦然。详细步骤包括设置thead复选框的checked属性与tbody复选框同步，以及在tbody复选框状态变化时更新thead复选框的状态。

摘要由CSDN通过智能技术生成

一、需求步骤–实现表格首行复选框全选反选功能
1、当表格第一行thead标签内复选框选中，则tbody标签内复选框全选中；thead标签内复选框未选中，则tbody标签内复选框全部未选中；
2、当tbody标签内复选框全被选中时，thead内复选框则被选中；tbody内只要有复选框未被选中，则thead内复选框不被选中。

二、撸码思路
1、thead复选框checked属性与tbody复选框一致，var tbody复选框[i] = this.thead复选框.checked;
2、每选中一个tbody内的复选框时，则遍历全部tbody复选框属性，出现tbody复选框[i].checked = false，则thead标签内复选框不被选中，tbody全部复选框属性为 = true时，则thead标签内复选框被选中。

三、代码详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        table {
    
            width: 300px;
            height: 100px;
            margin: 200px auto;
            /* 消除表格边框宽度叠加 */
            border-collapse:collapse;
        }
        table td,
        table thead th {
    
            width: 20px;
            height: 20px;
            padding: 5px 10px;
            border: 1px solid #ccc;
            font-family: '微软雅黑';
            color: #666;
            font-size: 14px;
        }

最低0.47元/天解锁文章