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

最新推荐文章于 2023-06-27 21:22:39 发布

炒米像啥

最新推荐文章于 2023-06-27 21:22:39 发布

阅读量2.6k

点赞数 1

文章标签： js checkbox dom

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

版权

一、需求步骤–实现表格首行复选框全选反选功能1、当表格第一行thead标签内复选框选中，则tbody标签内复选框全选中；thead标签内复选框未选中，则tbody标签内复选框全部未选中；2、当tbody标签内复选框全被选中时，thead内复选框则被选中；tbody内只要有复选框未被选中，则thead内复选框不被选中。二、撸码思路1、thead复选框checked属性与tbody复选框一致，var tbody复选框[i] = this.thead复选框.checked;2、每选中一个tbody内的复

摘要由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元/天解锁文章

炒米像啥

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
JS 实现表格中checkbox（复选框）全选反选

一、需求步骤–实现表格首行复选框全选反选功能1、当表格第一行thead标签内复选框选中，则tbody标签内复选框全选中；thead标签内复选框未选中，则tbody标签内复选框全部未选中；2、当tbody标签内复选框全被选中时，thead内复选框则被选中；tbody内只要有复选框未被选中，则thead内复选框不被选中。二、撸码思路1、thead复选框checked属性与tbody复选框一致，var tbody复选框[i] = this.thead复选框.checked;2、每选中一个tbody内的复
复制链接

扫一扫