在JS中解决关于复选框全选和取消选择的问题

最新推荐文章于 2022-12-31 19:34:38 发布

原创最新推荐文章于 2022-12-31 19:34:38 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#关于复选框全选和反选的问题

本文介绍了一种使用HTML和JavaScript实现全选与反选功能的方法，通过获取指定ID的元素并遍历其子元素来实现复选框的全选和反选。但存在全选后点击子元素取消选中时，全选状态不更新的BUG。

闲话少说，直接上案例：

html

<input type="checkbox" id="qx"> 全选/反选<br>
<div id="ip">
    <input type="checkbox">JavaScript
    <input type="checkbox">NodeJS
    <input type="checkbox">vue
    <input type="checkbox">react
    <input type="checkbox">angular
</div>

解题思路：

首先需要找到他们的id
其次需知道div中有多少个子元素
然后用函数解决点击事件
最后运用判断套循环语句

   <script>
        var qx1 = document.getElementById('qx');
        var ip1 = document.getElementById('ip');
        var len = ip1.children.length;//div中子元素的个数 
        qx1.onclick = function () {
            if (qx1.checked == true) {
                for (var i = 0; i < len; i++) {
                    ip1.children[i].checked = true;
                }
            } else {
                for (var i = 0; i < len; i++) {
                    ip1.children[i].checked = false;
                }
            }
        }

    </script>

（注意：此模式只解决复选框点击一次全选，再点击一次取消的问题，但是会出现全选后，点击子元素取消选中，全选不会取消选择的BUG）；