js-购物车的全选与反选

 

        

            

                
全选
                
学号
                
姓名
                
年龄
                
爱好
                
分数
            
        
        

            

                

                
1
                
1
                
1
                
1
                
1
            
            

                

                
1
                
1
                
1
                
1
                
1
            
            

                

                
1
                
1
                
1
                
1
                
1
            
        
    

   table {
            width: 400px;
            margin-top: 20px;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        
        table tr td,
        table tr th {
            text-align: center;
            height: 30px;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

  // 获取所有的单选框
        let checkboxs = document.getElementsByClassName('singleCheck')
            // 全选
        allcheck.addEventListener('click', function() {
                // 获得全选复选框的状态值
                if (this.checked) {
                    for (let i = 0; i < checkboxs.length; i++) {
                        checkboxs[i].checked = true
                    }
                } else {
                    for (let i = 0; i < checkboxs.length; i++) {
                        checkboxs[i].checked = false
                    }
                }
            })

 // 反选只要有一个单选框没有被选中，全选按钮就不会被选中
            // 方式1：
            // 转化为标准的数组
        let arr = Array.prototype.slice.call(checkboxs)
//记录被选中的复选框的个数
        let counts = 0
        for (let i = 0; i < arr.length; i++) {
            arr[i].addEventListener('click', function() {
                if (arr[i].checked == true) {
                    counts++
                } else {
                    counts--
                }
                if (counts == arr.length) {
                    allcheck.checked = true
                } else {
                    allcheck.checked = false
                }
            })
        }

//方式2  标杆思想
        for (let i = 0; i < checkboxs.length; i++) {
            checkboxs[i].addEventListener('click', function() {
                // 设置标杆
                let flag = true
                for (let j = 0; j < checkboxs.length; j++) {
                    if (!checkboxs[j].checked) {
                        flag = false
                    }
                    // 让全选框的值和flag标杆保持一致
                    allcheck.checked = flag
                }
            })
        }