JS购物车全选完整案例

效果描述

实现点击全选复选框，全部子复选框会走出相应反馈，同时点击全部子复选框，全选复选框也会做出相应反馈

全选复选框操作子复选框操作思路

1.将全选复选框的checked值赋给所有子复选框的checked值

代码实现

    let chkAll = document.querySelector('.checkAll')
    //获取所有子复选框对象
    let chkLi = document.querySelectorAll('.ck')
    //给全选复选框绑定点击事件
    chkAll.addEventListener('click',function(){
        通过遍历将全选复选框的checked值赋给子复选框的checked值
        chkLi.forEach(function(value,index){
            value.checked = chkAll.checked
        })
    })

子复选框反馈全选复选框操作思路

 通过设定一个值为true的布尔值变量，每次点击子复选框时遍历所有子复选框的选中状态，只要有一个子复选框没有被选中，就修改布尔变量为false，并赋值给全选复选框

代码实现

        //给每个字复选框绑定点击事件
        v.addEventListener('click',function(){
            //设定一个布尔变量
            let flag = true
            chkLi.forEach(function(v,i){
                //如果有一个复选框没有被选中就将布尔变量设为false
                if(v.checked === false){
                    flag = false
                }
            })
            //将flag的值赋给全选复选框
            chkAll.checked = flag
        })
   })