DOM ------ 表单的全选和取消全选

    //css代码
    table {
            width: 200px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        thead tr{
            height: 3px;
            background-color: skyblue;
            border: 1px solid #d7d7d7;
        }
        tbody tr {
            height: 30px;
        }
        tbody td {
            border: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg{
            background-color: pink;
        }
        //html代码
        <div class="wrap">
          <table>
              <thead>
                  <tr>
                      <th>
                          <input type="checkbox" id="j_cbAll">
                      </th>
                      <th>商品</th>
                      <th>价钱</th>
                  </tr>
              </thead>
              <tbody id="j_tb">
                  <tr>
                      <td>
                          <input type="checkbox">
                      </td>
                      <td>小米12</td>
                      <td>4999</td>
                  </tr>
                  <tr>
                      <td>
                          <input type="checkbox">
                      </td>
                      <td>小米11</td>
                      <td>3999</td>
                  </tr>
                  <tr>
                      <td>
                          <input type="checkbox">
                      </td>
                      <td>小米10</td>
                      <td>3999</td>
                  </tr>
                  <tr>
                      <td>
                          <input type="checkbox">
                      </td>
                      <td>Air</td>
                      <td>200</td>
                  </tr>
              </tbody>
          </table>
      </div>
      //js代码
      // 1.全选和取消全选做法: 让下面所有复选框的checked属性 (选中状态) 跟随 全选按钮即可 
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll') //全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input') //下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
            // this.checked 它可以得到当前复选框的选中状态 如果是true 就是选中, 如果是false就是未选中
            console.log(this.checked)
            for(var i=0;i<j_tbs.length;i++){
                j_tbs[i].checked = this.checked
            }
        }
        // 2.下面复选框要全部选中 上面全选才能选中
        for(var i=0;i<j_tbs.length;i++){
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true
                //每次点击下面的复选框都要循环检查这四个小按钮是否全被选中
                for(var i=0;i<j_tbs.length;i++){
                    if(!j_tbs[i].checked){
                        flag = false
                        break //退出for循环 可以提高执行效率 只要有一个没选中 就退出循环
                    } 
                }
                j_cbAll.checked = flag
            }
        }