javascript案例——表单复选框的全选与退选

案例要求：实现表单全选框与复选框的关联。

即①点击thead全选框，关联到tbody中的复选框（都被选中/不选中）；②手动选择tbody中所有复选框，关联到thead的全选框。

html部分：

写一个4行*3列的表格。

点击查看代码

<form action="">
        <table>
            <thead>
                <td><label for="tb_checkall"><input type="checkbox" id="tb_checkall">全选</label></td>
                <td>单价</td>
                <td>价格</td>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox">苹果</td>
                    <td>5</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td><input type="checkbox">橘子</td>
                    <td>6</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td><input type="checkbox">香蕉</td>
                    <td>3</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </form>

css部分：

为表格设置样式。

点击查看代码

<style>
        table {
            margin: 100px auto;
            text-align: center;
            width: 300px;
            height: 210px;
            border-collapse: collapse;
        }
        table thead {
            height: 60px;
            background-color: lightblue;
        }
        table tbody tr{
            border-bottom: 1px solid #999;
        }
</style>

js部分：

第一步：完成要求①，点击全选框关联到tbody中的所有复选框；

  var tb_checkall = document.querySelector('thead').querySelector('input');
  var cbs = document.querySelector('tbody').querySelectorAll('input');
  // 找到事件源：全选框（是一个input标签）；tbody中的复选框们（定义一个变量，使用querySelectorAll返回一个伪数组）。
  tb_checkall.onclick = function(){
  // 事件类型是onclick：每次点击全选框时触发事件。
    for(var i = 0;i < cbs.length;i++){
    // 每次点击全选框时，使用for循环遍历tbody中的复选框们，让他们与全选框的选中状态保持一致，达到关联的效果。
      cbs[i].checked = this.checked;
      // this指向事件的调用者，即tb_checkall；this.checked属性即全选框的选中状态，将该状态的true/false赋值给各位tbody中的复选框们，达成关联。
    }
  }

第二步：完成要求②，手动点击tbody的复选框时，全选框被关联。（即若tbody的复选框们都被选中，则全选框变为选中状态；有一个没选中，全选框都是未选中状态。）

 for(var i = 0;i < cbs.length;i++){
 // 使用for循环，给每个复选框都绑定事件。
     cbs[i].onclick = function(){
     // 事件类型为onclick：点击每个复选框，触发事件。
         var flag = true;      
         // 变量flag代表全选框的checked属性值
         for(var i = 0;i < cbs.length;i++){
         // 触发事件为：遍历每个复选框，检查是否有未被选中的，若有，则使全选框为未选中状态。
             if(!cbs[i].checked){
             // 意在说明若有复选框确实未被选中，则执行下面的语句；
                 flag = false;
                 // 若有未被选中的复选框，则全选框的checked属性为false。
                 break;
                 // 添加break只要有一个复选框未被选中，就退出for循环，提高了程序的执行效率。
             }
         }
         tb_checkall.checked = flag;
         // 如果有未被选中的复选框，则flag的值为false,全选框就未被选中。
         // 如果复选框都被选中了，不执行if中的语句，全选框的checked属性为true。
     }
  }

============================================= 　 这是分割线 　=============================================
笔者为js初学者，若有错误，欢迎批评指正。