js一键控制checkBox正反选以及随着变化取消全选状态

一：先上一段html代码：

<div class="wrap">
  <table>
    <!--全选反选按钮所在行-->
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="selectAll"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <!--每一个菜的选项-->
    <tbody id="cai">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>烤肉</td>
      <td>烤肉店</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>螺蛳粉</td>
      <td>螺蛳粉店</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>桂林米粉</td>
      <td>桂林米粉店</td>
    </tr>  
    </tbody>
  </table>
</div>

二：上js代码；

  //1 获取元素
  var selectAll = document.getElementById("selectAll");//全选按钮
  var cbs = document.getElementById("cai").getElementsByTagName("input");//底部的复选框

  //2 点击全选按钮，选中下面的小复选框
  selectAll.onclick = function () {
    //点击全选按钮时，要设置小复选框的状态为两种,下面的状态设置是根据顶部全选按钮的状态决定的

    //修改每个cbs中的复选框的checked属性为true即可
    for (var i = 0; i < cbs.length; i++) {

      //根据this的checked属性判断
//      if (this.checked == true) {
//        cbs[i].checked = this.checked;
//      } else {
//        cbs[i].checked = this.checked;
//      }

      //合并后的代码:
      cbs[i].checked = this.checked;
    }

  };

  //3 当我们点击底部的某个checkbox时，可能实现手动的全选，这时全选按钮需要进行相应的改变
  //  什么时候全选按钮可以选中？  下面的每个cb均被选中
  //  什么时候不能选中？   下面的任意一个cb没有选中，就不能选中全选按钮


  var flag;
  for (var i = 0; i < cbs.length; i++) {
    cbs[i].onclick = function () {
      //不确定全选按钮是否选中，先假设可以选中
      flag = true;

      //点击某个cb时，需要检测每个cb的状态
      for (var i = 0; i < cbs.length; i++) {
        //如果所有的cb中有某一个cb没有选中，这时设置flag为false即可
        if (cbs[i].checked == false) {
          flag = false;
          //如果有一个没有选中，设置flag为false，后面的就不需要查看了
          break;
        }
      }
      //根据假设条件验证，是否可以放入
//      if (flag) {
//        selectAll.checked = true;
//      } else {
//        selectAll.checked = false;
//      }

      selectAll.checked = flag;
    };
  }

综上，就是js一键控制checkBox正反选，以及如果有复选框没有选中或者全部，全选框也会相应的改变。

另外提醒一下，用jq进行全选反选的时候，不要用attr，用这个属性，只能选择一次，之后全选按钮就会失效。这个时候我们选择用prop()；

jq中的正反选，但是不包括全选按钮会相应改变的代码：

selectAll.on('click',function(){
    var isChecked = $(this).prop("checked");
     $("#cai").children(':checkbox').prop("checked",isChecked);
    });

每天都进步一点点！！