JS练手小作业：全选与反选

最新推荐文章于 2022-02-11 10:30:18 发布

小小豪豪

最新推荐文章于 2022-02-11 10:30:18 发布

阅读量205

点赞数

分类专栏： JS 文章标签： js javascript checkbox 前端

本文链接：https://blog.csdn.net/Chtholly_Nota_L/article/details/107198895

版权

JS 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

思路

主要是想做一个全选框，它能把所有其他的框都勾上，而再次点击，就可以把其它框取消全选，当其它所有的框勾选之后，这个全选框也会自动给勾上

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <td><input type="checkbox" id="all"></td>
                <td>全选</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>一般选择</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>一般选择</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>一般选择</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>一般选择</td>
            </tr>
        </tbody>

    </table>
    <script>
        var all_check = document.querySelector('#all');
        var checks = document.querySelector('tbody').querySelectorAll('input');
        // console.log(checks);
        all_check.onclick = function() {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = this.checked;
            }
        }
        for (var i = 0; i < checks.length; i++) {
            checks[i].onclick = function() {
            //每一个一般选择框在点击时都会做一次判断，
            //判断的内容是：是否每一个一般选择框都勾上了
                var flag = true;
                for (var i = 0; i < checks.length; i++) {
                    if (checks[i].checked != flag) {
                        flag = false;
                        break;
                    }
                }
                all_check.checked = flag;
            }
        }
    </script>
</body>

</html>