<!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>

<!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 在事件处理函数中, 让下面的都选中,获取都不选中//      如何判断全选有没有被选中?//        console.log(j_cbAll.checked);      //      if(j_cbAll.checked){//        //说明全选选中了,那么下面的都选中//////        cbs[0].checked = true;////        cbs[1].checked = true;////        cbs[2].checked = true;////        cbs[3].checked = true;//        for(var i = 0; i < cbs.length; i++) {//          cbs[i].checked = true;//        }////      }else{//        //说明全选没选中,那么下面的都不选中//        for(var i = 0; i < cbs.length; i++) {//          cbs[i].checked = false ;//        }//      }            //优化后:        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; //为了节省内存,将函数申明放到for循环外面          }    //当点击单个复选框时,要触发的函数    function cbClick(){        //  2.2 在事件处理函数中,判断每一个是否都选中,如果都选中,则全选也选中,否则,全选不选中      //2.2.1 判断所有的单个复选框是否都选中了      var flag = true; //用于判断是否都选中,假设都选中的状态      for(var i = 0; i < cbs.length; i++) {//        if(cbs[i].checked == false) {//          //证明有未选中的//          flag = false;//        }                if(!cbs[i].checked) {//          //证明有未选中的          flag = false;          break; //如果已经查到有未选中的了,就没有必须要在往下查看了        }              }      //2.2.2 根据之前判断的结果,给全选框赋值//      if(flag == true){//        j_cbAll.checked = true;//      }else{//        j_cbAll.checked = false;//      }        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>

javascript总结41:表格全选反选,经典案例详解的更多相关文章

  1. Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

  2. js和jq实现全选反选

    在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...

  3. JavaScript、全选反选-课堂笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 用javascript实现全选/反选组件

    以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...

  5. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  7. 用JavaScript实现全选-反选

    实现全选-反选 在日常生活我们会遇到需要全选-反选的地方,其实用JavaScript也能实现. 样式如下所示: 样式代码如下所示: <!DOCTYPE html PUBLIC "-// ...

  8. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

  9. JavaScript自动计算价格和全选

    JavaScript自动计算价格和全选,价格自增加减,复选框,反选,全选. 如图: 如图: CSS代码 @charset "gb2312"; /* CSS Document */ ...

随机推荐

  1. ThinkPHP Http工具类（用于远程采集 远程下载） phpSimpleHtmlDom采集类库_Jquery筛选方式 使用phpQuery轻松采集网页内容http://www.thinkphp.cn/extend/541.html

    [php]代码库 view sourceprint? <?php // +------------------------------------------------------------ ...

  2. py基础2--列表，元祖，字典，集合，文件

    本节内容 列表.元祖操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 三元运算&生成式&成员运算&解压法&队列堆栈&数据类型转换 1. 列表操作 ...

  3. JS的事件流的概念

    事件的概念: HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在 ...

  4. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  5. scrapy框架的持久化存储

    一 . 基于终端指令的持久化存储 保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的形式写入指定格式的文件中进行持久化操作. 执行输出指定格式进行存 ...

  6. Spring高级话题

    Spring Aware 在实际项目中,你不可避免的要用到spring容器本身的功能资源,这时你的bean要意识到spring容器的存在,才能调用spring提供的资源.spring aware本来就 ...

  7. java内存区域的分布

    读了<深入理解Java虚拟机>之后,当时理解了,过段时间又忘记了,在此做下记录,方便自我回顾,也希望能帮到想要学习虚拟机的同学. Java虚拟机在执行java程序时会把它所管理的内存分为5 ...

  8. ES6中新添加的Array.prototype.fill

    用法 array.fill(start=0, end=this.length) 示例 [1, 2, 3].fill(4) // [4, 4, 4] [1, 2, 3].fill(4, 1) // [1 ...

  9. PHP获取页面执行时间的方法（推荐）

    一些循环代码,有时候要知道页面执行的时间,可以添加以下几行代码到页面头部和尾部: 头部:$stime=microtime(true); 尾部: $etime=microtime(true);//获取程 ...

  10. 使用RampTexture实现BRDF效果

    [使用RampTexture实现BRDF效果] BRDF stands for bidirectional reflectance distribution function. While that ...