JavaScript实现复选框全选、全不选与反选功能详解

<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">

<script>
  /*一：需求分析：
      (1)点击全选：选中所有选择框（设置checked属性为true）
      (2)点击全不选：不选中所有选择框（设置checked属性为false）
      (3)点击反选：让每一个选择框的checked属性与自身相反
    二：思路分析
        1.获取元素
        2.注册事件
        3.事件处理
  */
  //1.获取页面元素
  var checkAll = document.getElementById('checkAll');//全选
  var unCheckAll = document.getElementById('unCheckAll');//全不选
  var reverseCheck = document.getElementById('reverseCheck');//反选
  var checkList = document.getElementsByClassName('check');//选择框列表
  //2.注册事件
  //2.1 全选
  checkAll.onclick = function(){
    //3.事件处理：选中所有选择框（设置checked属性为true）
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = true;
    }
  }
  //2.2 全不选
  unCheckAll.onclick = function(){
    //3.事件处理:不选中所有选择框（设置checked属性为false）
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = false;
    }
  }
  //2.3 反选
  reverseCheck.onclick = function(){
    //3.事件处理:让每一个选择框的checked属性与自身相反
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = !checkList[i].checked;//逻辑非取反
      // if (checkList[i].checked == true){
      //   checkList[i].checked = false;
      // }else{//false
      //   checkList[i].checked = true;
      // }
    }
  }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS全选、全不选、反选</title>
</head>
<body>
<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">
<script>
  /*一：需求分析：
      (1)点击全选：选中所有选择框（设置checked属性为true）
      (2)点击全不选：不选中所有选择框（设置checked属性为false）
      (3)点击反选：让每一个选择框的checked属性与自身相反
    二：思路分析
        1.获取元素
        2.注册事件
        3.事件处理
  */
  //1.获取页面元素
  var checkAll = document.getElementById('checkAll');//全选
  var unCheckAll = document.getElementById('unCheckAll');//全不选
  var reverseCheck = document.getElementById('reverseCheck');//反选
  var checkList = document.getElementsByClassName('check');//选择框列表
  //2.注册事件
  //2.1 全选
  checkAll.onclick = function(){
    //3.事件处理：选中所有选择框（设置checked属性为true）
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = true;
    }
  }
  //2.2 全不选
  unCheckAll.onclick = function(){
    //3.事件处理:不选中所有选择框（设置checked属性为false）
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = false;
    }
  }
  //2.3 反选
  reverseCheck.onclick = function(){
    //3.事件处理:让每一个选择框的checked属性与自身相反
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = !checkList[i].checked;//逻辑非取反
      // if (checkList[i].checked == true){
      //   checkList[i].checked = false;
      // }else{//false
      //   checkList[i].checked = true;
      // }
    }
  }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    td {
      font: 14px "微软雅黑";
    }
    tbody tr {
      background-color: #f0f0f0;
    }
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<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>诺基亚</td>
      <td>￥3000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>索尼爱立信</td>
      <td>￥4500</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>华为</td>
      <td>￥5000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>vivo</td>
      <td>￥2700</td>
    </tr>
    </tbody>
  </table>
</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }
  //获取全选的这个复选框
  var ckAll = my$("j_cbAll");
  //获取tbody中所有的小复选框
  var cks = my$("j_tb").getElementsByTagName("input");
  //点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
  ckAll.onclick = function () {
    //console.log(this.checked);
    for (var i = 0; i < cks.length; i++) {
      cks[i].checked = this.checked;
    }
  };
  //获取tbody中所有的复选框,分别注册点击事件
  for(var i=0;i<cks.length;i++){
    cks[i].onclick=function () {
      var flag=true;//默认都被选中了
      //判断是否所有的复选框都选中
      for(var j=0;j<cks.length;j++){
        if(!cks[j].checked){
          //没选中就进来了
          flag=false;
          break;
        }
      }
      //全选的这个复选框的状态就是flag这个变量的值
      ckAll.checked=flag;
    };
  }
</script>
</body>
</html>