Java教程

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

本文主要是介绍javascript全选框根据子复选框的状态实时更新-实例讲解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

1.0 实现效果

1.1 主要思路：

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

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>

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

这篇关于javascript全选框根据子复选框的状态实时更新-实例讲解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航