全选和取消全选

一、DOM实现购物车全选和取消全选

1.HTML代码展示

<h2>管理员列表</h2>
  <table border="1px" width="500px">
    <thead>
    <tr>
      <th><input type="checkbox"/>全选</th>
      <th>管理员ID</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"/></td>
        <td>1</td>
        <td>Tester</td>
        <td>修改 删除</td>
      </tr>
      <tr>
        <td><input type="checkbox"/></td>
        <td>2</td>
        <td>Manager</td>
        <td>修改 删除</td>
      </tr>
      <tr>
        <td><input type="checkbox"/></td>
        <td>3</td>
        <td>Analyst</td>
        <td>修改 删除</td>
      </tr>
      <tr>
        <td><input type="checkbox"/></td>
        <td>4</td>
        <td>Admin</td>
        <td>修改 删除</td>
      </tr>

2.js代码展示

//1. 查找触发事件的元素
    //本例中: 查找table下thead下第一个th中的input
    var chbAll=document.querySelector(
      "table>thead th:first-child>input"
    );
    //2. 绑定事件处理函数
    chbAll.onclick=function(){
      //3. 查找要修改的元素
      //本例中: 查找table下tbody下每行第一个td中的input
      var chbs=document.querySelectorAll(
        "table>tbody td:first-child>input"
      )
      //4. 修改元素
      //遍历找到的每个chb
      for(var chb of chbs){
        //让每个chb的checked状态与chbAll的checked状态保持一致
        chb.checked=this.checked;
      }
    }

    /*点下方的checkbox，也可能影响上方的checkbox*/
    //DOM 4步
    //1. 查找触发事件的元素
    //本例中: 查找tbody下每行第一个td中的input
    var chbs=document.querySelectorAll(
      "table>tbody td:first-child>input"
    );
    //2. 绑定事件处理函数
    for(var chb of chbs){
      chb.onclick=function(){
        //3. 查找要修改的元素
        //本例中: 查找thead下第一个th中的input
        var chbAll=document.querySelector(
          "table>thead th:first-child>input"
        );
        //4. 修改元素
        //先尝试去查找tbody下一个未选中的checkbox
        var unchecked=document.querySelector(
          "table>tbody td:first-child>input:not(:checked)"
        )
        //如果没找到未选中的，说明下方四个checkbox都选中
        if(unchecked==null){
          //就全选chbAll
          chbAll.checked=true;
        }else{//否则如果至少找到了一个未选中的，说明下方没有都选中
          //上方的chbAll就不能全选！
          chbAll.checked=false;
        }
      }
    }

3.总结

实现全选按钮：让其与chb的checked与chbALL的checked属性始终保持一致即可

实现下面按钮与全选按钮交互

反着想：尝试查找他body下一个为选中的checbox，如果没有找到未选中的，说明现在都是选中的，则chbALL全选。

否则如果至少找到了一个未选中的，就说明下方checkbox没有都选中，则chbALL就不能全选。