javascript教程系列41:表格全选反选,经典案例详解

最新推荐文章于 2022-04-10 12:43:24 发布

邢晋宇

最新推荐文章于 2022-04-10 12:43:24 发布

阅读量205

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_36017081/article/details/80398461

版权

JavaScript 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

<!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>iPhone8</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" />
      </td>
      <td>iPad Pro</td>
      <td>5000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" />
      </td>
      <td>iPad Air</td>
      <td>2000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" />
      </td>
      <td>Apple Watch</td>
      <td>2000</td>
    </tr>
    
    </tbody>
  </table>
  <input type="button" value="  反 选  " id="btn">
</div>

<script>
  // 整个全选,反选案例,可以分为三个需求
//  1. 全选点击时的逻辑
//  1.1 获取元素
    var j_cbAll = document.getElementById('j_cbAll');
    var tb = document.getElementById('j_tb');
    var cbs = tb.getElementsByTagName('input');
//    console.log(cbs);
//  1.2 给全选复选框注册点击事件
    j_cbAll.onclick = function(){
      //  1.3 在事件处理函数中, 让下面的都选中,获取都不选中
      for(var i = 0; i < cbs.length; i++) {
        cbs[i].checked = j_cbAll.checked;
      }         
    }
 
//  2. 下面的单个的复选框点击时的逻辑
  //2.1 给每一个单个复选框注册点击事件
    for(var i = 0; i < cbs.length; i++) {
      cbs[i].onclick = cbClick; 
    }
    //当点击单个复选框时,要触发的函数
    function cbClick(){
      //2.2.1 判断所有的单个复选框是否都选中了
      var flag = true;
      for(var i = 0; i < cbs.length; i++) {
        if(!cbs[i].checked) {
//          //证明有未选中的
          flag = false;
          break; //如果已经查到有未选中的了,就没有必须要在往下查看了
        }
        
      }
      //2.2.2 根据之前判断的结果,给全选框赋值
      j_cbAll.checked = flag;
      
    }
  
//  3. 反选点击时的逻辑
//  3.1 给反选按钮注册事件
  document.getElementById('btn').onclick = function(){
    //  3.2 事件处理函数中,让单个复选框取反
    for(var i = 0; i < cbs.length; i++) {
      cbs[i].checked = !cbs[i].checked;
      
    }
//  3.3 取反之后,判断每一个单个的复选框是否都选中
    cbClick();
    
  }
</script>
</body>

</html>