JavaScript解决方案全选的取消为什么DOM在事件中的循环需要用this而不能用数组

最新推荐文章于 2022-09-23 17:35:41 发布

HMS Howe

最新推荐文章于 2022-09-23 17:35:41 发布

阅读量77

点赞数 1

分类专栏：解决方案文章标签： javascript

本文链接：https://blog.csdn.net/Winchester_Y/article/details/124016737

版权

解决方案专栏收录该内容

13 篇文章 0 订阅

订阅专栏

遇到问题

本来的要求是全选后取消其中任何一项即可取消全选按钮，但是在取消一个选项后全选按钮并没有消失

附上代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <thead id="thead">
            <tr>
                <td>
                    <input type="checkbox" id="check1">
                </td>
                <td>角色</td>
                <td>属性</td>
            </tr>
        </thead>
        <tbody id="tbody">
            <tr>
                <td>
                    <input type="checkbox" id="check2">
                </td>
                <td>樱之宫莓香</td>
                <td>抖S</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="check2">
                </td>
                <td>日向夏帆</td>
                <td>傲娇</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="check2">
                </td>
                <td>星川麻冬</td>
                <td>妹妹</td>
            </tr>
        </tbody>
    </table>
    <script>
        var check1 = document.getElementById("check1");
        var tbody = document.getElementsByTagName("tbody");
        var check2 = tbody[0].getElementsByTagName("input");
        check1.onclick = function () {
            if (check1.checked == true) {
                for (i = 0; i <= 2; i++) {
                    check2[i].checked = true;
                }
            } else {
                for (i = 0; i <= 2; i++) {
                    check2[i].checked = false;
                }
            }
        }
        for (i = 0; i <= 2; i++) {
            check2[i].onclick = function () {
                if (check2[i].checked == false) {
                    check1.checked = false;
                }
            }
        }
    </script>
    <style>
        #thead {
            background-color: cyan;
        }

        input {
            margin: 8px;
        }
    </style>
</body>

</html>

解决方案

问题原因是第63行，将check2[i].checked修改为this.checked即可

        for (i = 0; i <= 2; i++) {
            check2[i].onclick = function () {
                if (this.checked == false) {
                    check1.checked = false;
                }
            }
        }