Day2全选

最新推荐文章于 2024-07-13 16:05:23 发布

m0_45442261

最新推荐文章于 2024-07-13 16:05:23 发布

阅读量77

点赞数

本文链接：https://blog.csdn.net/m0_45442261/article/details/114408485

版权

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

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

<body>
    <!-- 第一个点击事件复选框选中点击父，那么三个子全选huoquanbuxuan
    第二个点击事件，选择子类，如果全选，那么父类也被选中此时子类为3；如果有一个没选，那么父类也不选，此时子类数目为0； -->

    <input type="checkbox" id="btn">爱好
    <hr>
    <input type="checkbox">变脸
    <input type="checkbox">烹饪
    <input type="checkbox">爬山

    <script>
        //1.获得对象和初始化计数值；
        var btn = document.getElementById("btn");
        var inps = document.getElementsByTagName("input");
        var num = 0;
        //2.对父进行事件绑定
        btn.onclick = function () {
            if (btn.checked == true) {//父为真那么所有都为真；
                for (var i = 1; i < inps.length; i++) {
                    inps[i].checked = true;
                }
                num = 3;
            } else {
                for (var i = 1; i < inps.length; i++) {
                    inps[i].checked = false;
                }
                num = 0;
            }
        }

        //3.在循环中给子进行计数；
        for (var i = 1; i < inps.length; i++) {
            inps[i].onclick = function () {
                //alert('ok');
                if (this.checked == true) {//此时必须用this
                    num++;
                    //console.log(num)
                } else {
                    num--;
                }

                if (num == 3) {//子类全选，
                    btn.checked = true;
                } else {
                    btn.checked = false;
                }
            }
        }

    </script>

</body>

</html>

m0_45442261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Day2全选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全选0305</title></head><body> <!-- 第一个点击
复制链接

扫一扫