复选框的全选与全不选

最新推荐文章于 2023-02-21 15:38:18 发布

李小小小白

最新推荐文章于 2023-02-21 15:38:18 发布

阅读量148

点赞数

分类专栏：巩固基础程序员开发文章标签： javascript html

本文链接：https://blog.csdn.net/liqazwsxedcrfv/article/details/116899467

版权

HTML JavaScript 表格操作全选反选

关键词由CSDN通过智能技术生成

程序员开发同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

巩固基础

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="checkAll"/>全选</th>
                <th>名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="gou"/>勾选</td>
                <td>iphone12</td>
                <td>5999</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="gou"/>勾选</td>
                <td>iphone12 mini</td>
                <td>5499</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="gou"/>勾选</td>
                <td>iphone12 Max</td>
                <td>8999</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="gou"/>勾选</td>
                <td>小米 11</td>
                <td>3999</td>
            </tr>
        </tbody>
    </table>
    <script>
        var checkAll = document.getElementById("checkAll")
        var gou = document.querySelectorAll(".gou")
        checkAll.onclick = function () {
            for (var i = 0; i < gou.length; i++){
                //让全选框和下面的小框的状态保持一致即可实现全选与全不选
                gou[i].checked = this.checked;
            }
        }
        //根据便利获取到每一个小复选框
        for (var i = 0; i < gou.length; i++){
            gou[i].onclick = function () {
                var flag = true;
                //循环每一个小复选框，用于判断是否被选中
                for (var i = 0; i < gou.length; i++){
                    if (!gou[i].checked){
                        flag = false;
                        break; //为了提高效率，但凡有一个没被勾选就退出循环
                    }
                }
                checkAll.checked = flag
            }
        }
    </script>
</body>
</html>

李小小小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复选框的全选与全不选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table> <thead> <tr> <th><input t.
复制链接

扫一扫

专栏目录