js实现表单全选按钮，取消全选功能

最新推荐文章于 2025-05-20 16:08:55 发布

爬楼梯的小新

最新推荐文章于 2025-05-20 16:08:55 发布

阅读量976

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_57607714/article/details/122527798

JavaScript 专栏收录该内容

86 篇文章

订阅专栏

本文通过HTML、CSS和JavaScript展示了如何实现商品全选功能：点击全选按钮时选中所有商品，取消任一商品选择时自动取消全选状态。

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

案例：点击商品全选按钮则下面选项全部选中下面三个按钮取消一个则自动取消上面那个全选按钮

html和css：

 <style>
        thead th {
            width: 80px;
            height: 30px;
            border: 1px solid #fff;
            color: #fff;
            background-color: #0095d8;
            text-align: center;
        }
        
        tbody td {
            width: 20px;
            border: 1px solid #ccc;
            text-align: center;
            font-weight: 300;
        }
    </style>
</head>

<body>
    <table cellpadding="2" cellspacing="0">
        <thead>
            <tr>
                <th><input type="checkbox" id="j_tbAll" /></th>
                <th>商品</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>苹果</td>
                <td>20</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>香蕉</td>
                <td>30</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>凤梨</td>
                <td>50</td>
            </tr>
        </tbody>
    </table>
</body>

js：

<script>
    var j_tbAll = document.getElementById('j_tbAll');
    var j_tb = document.getElementById('j_tb').querySelectorAll('input'); //选中下面的复选框
    var flag = 0;
    //全选按钮（这个不影响下面三个小按钮）
    j_tbAll.onclick = function() {
            // console.log(this.checked);  可以得到当前复选框的选中状态 返回布尔值 true/false
            for (var i = 0; i < j_tb.length; i++) {
                j_tb[i].checked = this.checked;
            }
        }
        //全选 取消一个则取消全选 小按钮全部勾选 全选自动勾选
    for (i = 0; i < j_tb.length; i++) {

        j_tb[i].onclick = function() {
            var flag = true;  //控制全选按钮是否选中
//每次点击下面的复选框 都要循环检查三个小按钮是否全被选中 所有要用for循环遍历每个按钮
            for (var i = 0; i < j_tb.length; i++) {
                if (!j_tb[i].checked) {
                    flag = false;
                }
                j_tbAll.checked = flag;
            }
        }
    }
</script>