js正反两种思维实现购物车全选反选逻辑

    

      

         
        全选
      
      
商品
      
商家
      
价格
    
    

      

        
      
      
小米手机
      
小米
      
￥1999
    
    

      

        
      
      
小米净水器
      
小米
      
￥4999
    
    

      

        
      
      
小米电视
      
小米
      
￥5999
    
  

  * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }

 方法一：（逆向思维）

         核心：

        1.将全选框的状态赋给每一个复选框，全选的状态决定了复选框是否选中。

        2.遍历每一个复选框，如果复选框是false，就退出函数。如果循环成功结束后，就让全选框处于选中状态。代表循环走完都没有退出函数，每一个复选框都为true。

let all = document.querySelector('#checkAll')
let cks = document.querySelectorAll(".ck")
all.addEventListener("click", function () {
  for (let i = 0; i < cks.length; i++) {
    cks[i].checked = all.checked
  }
})
for (let i = 0; i < cks.length; i++) {
  cks[i].addEventListener("click", function () {
    for (let j = 0; j < cks.length; j++) {
      if (cks[j].checked === false) {
        all.checked = false
        return
      }
    }
    all.checked = true
  })
}

方法二：（正向思维）

        核心：

        1.将全选框的状态赋给每一个复选框

        2.将处于选中状态的复选框挑选出来，存入伪数组。如果伪数组的长度等于复选框的长度，则让全选框处于选中状态。

         优化后，让代码更灵活：将伪数组的长度是否等于复选框的长度的状态赋给全选框

let all = document.querySelector('#checkAll')
let cks = document.querySelectorAll(".ck")
all.addEventListener("click", function () {
  for (let i = 0; i < cks.length; i++) {
    cks[i].checked = all.checked
  }
})
for (let i = 0; i < cks.length; i++) {
  cks[i].addEventListener("click", function () {
    let temp = document.querySelectorAll('.ck:checked')
    all.checked = cks.length === temp.length
  })
}