JavaScript CheckBox复选框（全选/全不选反选）

运行代码后，即可实现全选/全不选反选等操作

效果图
默认↓
在这里插入图片描述
全选↓

反选↓

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        list-style: none;
    }

    ul {
        padding-right: 20px;
    }

    input {
        width: 15px;
        height: 15px;
    }
</style>

<body>
    <h1><input type="checkbox">全选</h1>
    <button>全选</button> <button>反选</button>
    <ul>
        <li><input type="checkbox" name="" id="">选项一
        </li>

        <li><input type="checkbox" name="" id="">选项二
        </li>

        <li><input type="checkbox" name="" id="">选项三
        </li>

        <li><input type="checkbox" name="" id="">选项四
        </li>

        <li><input type="checkbox" name="" id="">选项五
        </li>
    </ul>

    <script>
        var quan = document.querySelectorAll('h1 input')[0]
        var butt = document.querySelectorAll('button')
        var arr = document.querySelectorAll('li input')
        //将伪数组转成数组
        arr.__proto__.__proto__ = Array.prototype


        //按钮全选
        quan.onchange = function () {
            arr.forEach((item, index) => {
                item.checked = this.checked
            })
        }
        console.log(butt[0]);
        //全选
        butt[0].onclick = function () {
            quan.checked = true
            arr.forEach((item) => {
                item.checked = true
            })
        }

        //反选
        butt[1].onclick = function(){
            arr.forEach((item)=>{
                item.checked=!item.checked
            })
           quan.checked= arr.every((i)=>i.checked)
        }

           
        //思路： 每一个的商品都被勾选上， 店铺为true 
        //用这个方法需要arr（arr是伪数组）转为数字 ==>arr.__proto__.__proto__ = Array.prototype
        //===>第一种方法
        arr.forEach((item, index) => {
            item.onchange = function () {
                quan.checked = arr.every((item) => {
                    return item.checked
                })
            }
        })

        //原生js for
        // 有一个商品没有被勾选，店铺就为 false
        // 第二种方法
        // arr.forEach((item) => {
        //     item.onchange = function () {
        //         quan.checked = true
        //         for (var i = 0; i < arr.length; i++) {
        //             if (!arr[i].checked) {
        //                 quan.checked = false
        //                 break
        //             }
        //         }
        //     }
        // }) 
    </script>
</body>

</html>

Auguring

发布了8 篇原创文章 · 获赞 0 · 访问量 83

私信关注

JavaScript CheckBox复选框（全选/全不选 反选）

猜你喜欢

JavaScript CheckBox复选框（全选/全不选反选）