js开关思想

需求

1. 点击全选/全不选的复选框,下面全部勾上.反之
2. 当下面三个复选框全部处于选中状态,全选/全不选自动勾上

开关思想

• 判断数组中是否所有元素都满足条件

代码

let checkAll = document.querySelector('#checkAll')  //全选/全不选框
let checkList = document.querySelectorAll('.check') //复选框们

// 点击全选,勾上所有.反之
checkAll.onclick = function () {
  for (let i = 0; i < checkList.length; i++) {
    checkList[i].checked = this.checked
  }
}

// 开关思想
for (let i = 0; i < checkList.length; i++) {
  checkList[i].onclick = function () {
    // 默认都被选中
    let flag = true
    // 遍历寻找没勾上的
    for (let j = 0; j < checkList.length; j++) {
      if (!checkList[j].checked) {
        flag = false
        break
      }
    }
    checkAll.checked = flag
  }
}

逻辑：默认复选框都为选中状态，在点击复选框时，遍历找有无未选中状态的，但凡找到一个，立刻跳出遍历，返回结果

应用场景

• 购物车订单

• 注册页面的表单： 每一个框都需要填写，少任意一个都不满足注册条件