使用:checked选择器实现全选反选案例

使用:checked选择器实现全选反选案例

 // 获取全选按钮
        let checkAll = document.querySelector('#checkAll')
            // 获取全选的文本
        let all = document.querySelector('.all')
            // 获取所有的input复选框
        let cks = document.querySelectorAll('.ck')
            // console.log(checkAll, all, ck);   //打印查看是否获取到元素
            // 给全选按钮绑定单击事件
        checkAll.addEventListener('click', function() {
                // 获取全选按钮的状态
                let state = checkAll.checked
                    // console.log(state);
                cks.forEach(function(value, index) {
                        // 给每一个复选框赋值状态
                        value.checked = state
                    })
                    // 判断全选复选的状态，为真就改为‘取消’，为假就改为‘全选’
                    // if (state) {
                    //     all.innerHTML = `取消`
                    // } else {
                    //     all.innerHTML = `全选`
                    // }
                    // 用三元表达式更简便
                all.innerHTML = state ? `取消` : `全选`
            })  

       // 通过复选框选中的次数判断是否为全选
        // 给cks每一个复选框添加单击事件
        cks.forEach(function(value, index) {
            value.addEventListener('click', function() {
                // 定义一个复选框选中的次数变量
                let count = document.querySelectorAll('.ck:checked').length
                    // 判断选中的次数是否与cks长度相等
                if (count == cks.length) {
                    // 长度相等，勾选全选复选框
                    checkAll.checked = true
                        // 给'全选'文本重新赋值`取消`
                    all.innerHTML = `取消`
                } else {
                    // 长度不相等，不勾选全选复选框
                    checkAll.checked = false
                        // 给'全选'文本重新赋值`全选`
                    all.innerHTML = `全选`
                }
            })
        })