javascript 实现全选和全不选

最新推荐文章于 2021-09-07 18:12:38 发布

var@

最新推荐文章于 2021-09-07 18:12:38 发布

阅读量196

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_45525071/article/details/102922310

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<body>
    <input type="checkbox" id="pt">全选/全不选<br>
    <div id="box">
        <input type="checkbox">JavaScript
        <input type="checkbox">Java
        <input type="checkbox">Python
        <input type="checkbox">C++
    </div>


    <script>
        //获取元素
        var pt = document.getElementById('pt');
        var put = document.getElementById('box').children;

        //点击事件
        pt.onclick = function () {
            //遍历每一个复选框
            for (var i = 0, len = put.length; i < len; i++) {
                //当全选时，每一个复选选中
                if (pt.checked == true) {
                    put[i].checked = true;
                } else if (pt.checked == false) {
                    put[i].checked = false;
                }
            }

        }
        //当复选框全选时，全选框则为真
        for (var i = 0, len = put.length; i < len; i++) {
            //每一个复选框的点击事件
            put[i].onclick = function () {
                var num = 0;      // 赋予一个变量
                //遍历每一个复选框的cheacked的值
                for (var i = 0, len = put.length; i < len; i++) {
                    //计算每一个复选框为真的值
                    if (put[i].checked == true) {
                        num++; 
                    }
                }

                //当全部复选框为真，则全选为真
                if (num == put.length) {
                    pt.checked = true;
                } else {
                    pt.checked = false;
                }


            }
        }

    </script>
</body>