javascript总结41:表格全选反选,经典案例详解

<!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:表格全选反选,经典案例详解的更多相关文章

Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
js和jq实现全选反选
在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...
JavaScript、全选反选-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
用javascript实现全选/反选组件
以下是本人制作的全选/反选组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
表单javascript checkbox全选反选全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能版权声明:未经授权,内容严禁转载! 构建主体界面编写 HTML 代码和 CSS 代码,设计主题界面 <style> #user { wid ...
用JavaScript实现全选-反选
实现全选-反选在日常生活我们会遇到需要全选-反选的地方,其实用JavaScript也能实现. 样式如下所示: 样式代码如下所示: <!DOCTYPE html PUBLIC "-// ...
JavaScript Web API 全选反选案例
全选反选全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
JavaScript自动计算价格和全选
JavaScript自动计算价格和全选,价格自增加减,复选框,反选,全选. 如图: 如图: CSS代码 @charset "gb2312"; /* CSS Document */ ...

随机推荐

yum ftp本地源
一. 准备工作1. 安装系统centos7.32. 环境 10.10.10.14 controller-1 10.10.10.15 computer-1 3. 在14主机上安装FTP服务yum ins ...
Ubuntu无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)
结果终端提示:无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它?” 解决办法如 ...
TortoiseSVN/Git覆盖图标失效的解决方案
之前在电脑上安装了TortoiseGit和TortoiseSVN这两种版本控制,使用一段时间之后发现,这两种版本控制的覆盖图标都无法显示,起初以为是git和svn使用的图标的不一样,有冲突,导致这两种 ...
halcon连续采集图像
dev_close_window()dev_update_window('off')create_bar_code_model ([], [], BarCodeHandle)dev_open_wind ...
leetcode704
public class Solution { public int Search(int[] nums, int target) { var len = nums.Length; ; ; if (t ...
RHCE7 学习里程-4用户权限，简单进程管理
#创建用户 useradd abc 使用 vipw 命令查看 /etc/passwd 文件下是否存在新用户 #G却换到最后一行 #创建账号的时候,默认也新建了一个组,组名跟用户名一样 groupad ...
delphi BLE 后台
http://codeverge.com/embarcadero.delphi.ios/
Shiro session和Spring session一样吗？
出自:https://yq.aliyun.com/articles/114167?t=t1 1. 疑问我们在项目中使用了spring mvc作为MVC框架,shiro作为权限控制框架,在使用过程中慢 ...
python算法之希尔排序
希尔排序希尔排序(Shell Sort)是插入排序的一种.也称缩小增量排序,是直接插入排序算法的一种更高效的改进版本.希尔排序是非稳定排序算法.该方法因DL．Shell于1959年提出而得名. 希尔 ...
jbpm角色审批
可分配是一个部门或角色组,也可以选择一个表达式操作,提交任务时可以根据权限过滤这个部门或组的用户中选择一个可操作用户 <task name="审核"> ...

javascript总结41:表格全选反选,经典案例详解

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

随机推荐

热门专题