javascript全选框根据子复选框的状态实时更新-实例讲解

最新推荐文章于 2023-08-28 22:45:24 发布

intoSunshine

最新推荐文章于 2023-08-28 22:45:24 发布

阅读量453

点赞数 1

分类专栏： JavaScript 文章标签： javascript js java

本文链接：https://blog.csdn.net/shaochen2015821426/article/details/117910498

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实例：一组数据复选框全部被勾上，则全选框要勾上，一组数据复选框没有全部被勾上，则全选框不勾上

1.0 实现效果

1.1 主要思路：

对所有的子复选框进行监听
设置一个标志位，默认他成立
在子复选框的监听事件里：遍历整个子复选框，如果存在不同的属性，就改变标志位为不成立
全选框通过标志位来判断子复选框的状态，进而修改属性

1.2 代码实现：

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

<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>
    <input type="checkbox" id="ck-all">全选框
    <div id="ck-zi">
        <input type="checkbox">张三
        <br/>
        <input type="checkbox">李四
        <br/>
        <input type="checkbox">王二麻
    </div>
    <script>
        var ckAll = document.getElementById('ck-all') //获取全选框的对象
        var ckArr = document.getElementById('ck-zi').getElementsByTagName('input') //这里获得子复选框的对象，并放入数组中
        for (var i = 0; i < ckArr.length; i++) {
            //对所有的子复选框进行监听
            ckArr[i].onclick = function() {
                // 设置一个标志位，默认他成立
                var flag = true;
                for (var i = 0; i < ckArr.length; i++) {
                    //在子复选框的监听事件里：遍历整个子复选框，如果存在不同的属性，就改变标志位为不成立
                    if (!ckArr[i].checked) {
                        flag = false;
                        break;
                    }
                }
                //全选框通过标志位来判断子复选框的状态，进而修改属性
                ckAll.checked = flag;
            }
        }
    </script>
</body>

</html>

这个例子可以解决很多类似的问题，只要是主元素需要根据一组子元素的变换而变化的时候，就可以使用这个例子

intoSunshine

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
3
评论
javascript全选框根据子复选框的状态实时更新-实例讲解

实例：一组数据复选框全部被勾上，则全选框要勾上，一组数据复选框没有全部被勾上，则全选框不勾上1.0 实现效果1.1 主要思路：对所有的子复选框进行监听设置一个标志位，默认他成立在子复选框的监听事件里：遍历整个子复选框，如果存在不同的属性，就改变标志位为不成立全选框通过标志位来判断子复选框的状态，进而修改属性1.2 代码实现<!DOCTYPE html><html lang="en"><head> <meta charset=".
复制链接

扫一扫