Webapi 学习过程中,个人在学习dom的途中了解到了很多思想,比如排他思想,开关灯思想等等,在此给自己进行开关灯思想的方法小结.

注意: 下面为本案例的大致代码

<table>
      <tr>
        <th><input type="checkbox" id="checkAll" />全选/全不选</th>
        <th>菜名</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>红烧肉</td>
        <td>隆江猪脚饭</td>
        <td>￥200</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>香酥排骨</td>
        <td>隆江猪脚饭</td>
        <td>￥998</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="check" />
        </td>
        <td>北京烤鸭</td>
        <td>隆江猪脚饭</td>
        <td>￥88</td>
      </tr>
    </table>

2.需求:

• (1)点击全选全不选框,下方三个选择框一起同步选中状态
• (2)检测下方三个选择框是否全选,全选的话上方的全选框也被选中,否则不选中(即开关思想,遍历检查下方选择框的选中状态,)

/* 思路分析
    1. 点击全选按钮 : 设置每一个选择框checked值与自身一致
      自己是true：每一个选择框也是true. 否则就是false
    
    2.点击下方每一个选择框 :  判断是否所有选择框都选中
      true  : 都选中， 修改全选框checked值为true.
      false : 没有都选中， 修改全选框checked值为false.
    */

    //1.获取元素
    let checkAll = document.querySelector('#checkAll')
    let checkList = document.querySelectorAll('.check')

    //2.注册事件

    //2.1 全选框
    checkAll.onclick = function () {
      //3.设置每一个选择框checked值与自身checked一致   
      console.log(this)//自己   （环境对象）
      for (let i = 0; i < checkList.length; i++) {
        checkList[i].checked = this.checked
      }
    }

    //2.2 点击每一个选择框 ： 判断数组中是否所有选择框checked值都为true
    /* 
    开关思想 :  判断数组中是否所有的元素都满足条件
    1.声明开关变量 :  let flag = true
    2.检测开关变量 :  遍历数组，找false
    3.获取开关结果
     */
    for(let i = 0;i<checkList.length;i++){
      checkList[i].onclick = function(){
        //3. 事件处理
        //3.1 声明开关变量
        let flag = true
        //3.2 检测开关变量 : 遍历数组，找false
        for(let j = 0;j<checkList.length;j++){
          if( !checkList[j].checked ){//找false
            flag = false
            break
          }
        }
        //3.3 获取开关结果
        // 只要出现一个没有被选中 总按钮的选中状态就是false 
        checkAll.checked = flag

        // if( flag ){
        //   checkAll.checked = true
        // }else{
        //   checkAll.checked = false
        // }
      }
    }