JS实现全选

 
嗨，同学们好，老师这里是专门教同学解决一些针对性的问题，所以说综合起来，就要靠同学自己了。
这节课我们学一个很实用的东西，全选操作！比如淘宝这种商城对吧，我的购物车，我要全选购买，或者删除，一个一个的来肯定麻烦，所以就有了全选和批量处理，那就是复选框！
 
这里我们用一个table表格来控制吧！看代码：
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>JS全选，复选框</title>
  6. </head>
  7. <body>
  8. <table id="mytable">
  9.     <tr>
  10.         <th><input type="checkbox" id="quan"/></th>
  11.         <th>序号</th>
  12.         <th>姓名</th>
  13.         <th>性别</th>
  14.         <th>地址</th>
  15.     </tr>
  16.     <tr>
  17.         <td><input type="checkbox"/></td>
  18.         <td>1</td>
  19.         <td>张三</td>
  20.         <td>女</td>
  21.         <td>四川省成都市</td>
  22.     </tr>
  23.     <tr>
  24.         <td><input type="checkbox"/></td>
  25.         <td>2</td>
  26.         <td>李斯</td>
  27.         <td>女</td>
  28.         <td>四川省成都市</td>
  29.     </tr>
  30.     <tr>
  31.         <td><input type="checkbox"/></td>
  32.         <td>3</td>
  33.         <td>玩玩玩</td>
  34.         <td>男</td>
  35.         <td>四川省成都市</td>
  36.     </tr>
  37.     <tr>
  38.         <td><input type="checkbox"/></td>
  39.         <td>4</td>
  40.         <td>哈哈哈</td>
  41.         <td>女</td>
  42.         <td>四川省成都市</td>
  43.     </tr>
  44. </table>
  45. <script>
  46.     // onload事件 页面加载完直接运行
  47.     window.onload = function () {
  48.         var mytable = document.getElementById("mytable");
  49.         var qq = document.getElementById("quan");
  50.         mytable.style.border = "1px solid gray";
  51.         mytable.style.borderCollapse = "collapse";
  52.         mytable.style.textAlign = "center";
  53.         mytable.style.width = "800px";
  54.         //以上是给table表格添加样式
  55.         //使用循环获取到表格的tr长度
  56.         for (i = 1; i < mytable.rows.length; i++) {
  57.             //因为复选框是tr里的第一个，所以cells里的数组下标为0
  58.             mytable.rows[i].cells[0].firstChild.onclick = function () {
  59.                 //当我点击它，就做判断
  60.                 //先判断它本身是被选中的就往下面走
  61.                 if (this.checked) {
  62.                     //如果它被选中我们就走进for循环
  63.                     for (j = 1; j < mytable.rows.length; j++) {
  64.                         //获取tr的长度，然后判断所有的复选框
  65.                         if (!mytable.rows[j].cells[0].firstChild.checked) {
  66.                             //如果这些复选框，有一个没有被选中，全选就变成未被选中
  67.                             qq.checked = false;
  68.                             return true;
  69.                             //最后结束返回 true
  70.                         }
  71.                     }
  72.                     //if判断，所有复选框都是选中的，就让全选变成true 变成选中
  73.                     qq.checked=true;
  74.                 }
  75.                 else {
  76.                     //如果它本身没有被选中，全选当然是变成false 未被选中
  77.                     qq.checked = false;
  78.                 }
  79.             }
  80.         }
  81.         //点击全选的复选框，将所有的复选框变成和它一样，要么选中，要么未选中
  82.         qq.onclick=function() {
  83.             for (i = 1; i < mytable.rows.length; i++) {
  84.                 mytable.rows[i].cells[0].firstChild.checked = this.checked;
  85.             }
  86.         };
  87.         //以下是循环并判断表格里的tr和td，添加css样式
  88.         for (i = 0; i < mytable.rows.length; i++) {
  89.             if (i == 0) {
  90.                 mytable.rows[0].style.backgroundColor = "lightgray";
  91.             } else {
  92.                 mytable.rows[i].onmouseover = function () {
  93.                     this.style.backgroundColor = "red";
  94.                 };
  95.                 mytable.rows[i].style.cursor = "pointer";
  96.                 if (i % 2 == 0) {
  97.                     mytable.rows[i].style.backgroundColor = "yellow";
  98.                     mytable.rows[i].onmouseout = function () {
  99.                         this.style.backgroundColor = "yellow";
  100.                     }
  101.                 } else {
  102.                     mytable.rows[i].style.backgroundColor = "orange";
  103.                     mytable.rows[i].onmouseout = function () {
  104.                         this.style.backgroundColor = "orange";
  105.                     }
  106.                 }
  107.             }
  108.             for (j = 0; j < mytable.rows[i].cells.length; j++) {
  109.                 var c = mytable.rows[i].cells[j];
  110.                 c.style.border = "1px solid gray";
  111.             }
  112.         }
  113.     }
  114. </script>
  115. </body>
  116. </html>
 
以上代码，同学们主要看的不是给table表格添加样式，当然了，最下面的代码，判断和循环那里可以多看看，是什么意思，我没写注释，重点是，全选的操作那里。
代码同学们可以直接copy拿走，但是一定要了解里面的代码，这样你修改成自己的代码也就简单了，而且以后自己才能写出来哦。
 

第十六篇 JS实现全选操作的更多相关文章

  1. 利用js写全选操作

    <script type="text/javascript"> function checkall(qx) { var ck=document.getElementsB ...

  2. Python之路【第十六篇】：Django【基础篇】

    Python之路[第十六篇]:Django[基础篇]   Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...

  3. 跟我学SpringCloud | 第十六篇：微服务利剑之APM平台（二）Pinpoint

    目录 SpringCloud系列教程 | 第十六篇:微服务利剑之APM平台(二)Pinpoint 1. Pinpoint概述 2. Pinpoint主要特性 3. Pinpoint优势 4. Pinp ...

  4. Egret入门学习日记 --- 第十六篇（书中 6.10~7.3节 内容）

    第十六篇(书中 6.10~7.3节 内容) 昨天搞定了6.9节,今天就从6.10节开始. 其实这个蛮简单的. 这是程序员模式. 这是设计师模式. 至此,6.10节 完毕. 开始 6.11节. 有点没营 ...

  5. 解剖SQLSERVER 第十六篇 OrcaMDF RawDatabase --MDF文件的瑞士军刀（译）

    解剖SQLSERVER 第十六篇 OrcaMDF RawDatabase --MDF文件的瑞士军刀(译) http://improve.dk/orcamdf-rawdatabase-a-swiss-a ...

  6. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  7. JS实现全选、反选、不选

    JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  8. elementUI+JS实现全选与反选

    在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...

  9. JS实战 · 复选框全选操作

    思路: 1.获取被选中checkbox,通过checked属性的状态完成: 2.获取被选中的checkbox的value值: 3.求所有value的和sum: 4.定义span区域存储和sum:   ...

随机推荐

  1. SVN+MAVEN项目打包

    题记:项目打包bash脚本 环境准备 maven版本:3.5.2 mvn -v #查看maven的版本信息 svn版本:1.4.0 svn --version #查看svn版本信息 1.update_ ...

  2. 爬取网贷之家平台数据保存到mysql数据库

    # coding utf-8 import requests import json import datetime import pymysql user_agent = 'User-Agent: ...

  3. minio 集群启动方法

    Sample: export MINIO_ACCESS_KEY=<TENANT1_ACCESS_KEY> export MINIO_SECRET_KEY=<TENANT1_SECRE ...

  4. 前端vscode常用插件

    Auto Rename Tag 这是一个html标签的插件,可以让你修改一边标签,另外一边自动改变. Beautify 格式化代码插件 Braket Pair Colorizer 给js文件中的每一个 ...

  5. Django-MVC框架和MTV框架

    MVC框架 全称Model View Controller,分为三个基本部分:模型Model.视图View和控制器Controller,具有耦合性低.重用性高.生命周期低等优点. 结构 View层,操 ...

  6. 生成器send方法、递归、匿名函数、内置函数

    今日内容 1.生成器的send方法. 2.递归:函数自己调用自己 3.匿名函数 4.内置函数 生成器send方法 send的工作原理 1.send发生信息给当前停止的yield 2.再去调用__nex ...

  7. flask_script

    Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...

  8. JAVA第四周总结

    Java实验报告二 第一题 写一个名为Rectangle的类表示矩形.其属性包括宽width.高height和颜色color,width和height都是double型的,而color则是String ...

  9. luoguP1045 （Java大数）

    题目链接:https://www.luogu.org/problemnew/show/P1045 题意:给定p(1000<p<3100000),求2^p-1的位数和最后500位(若不足高位 ...

  10. Linux下面查看网卡的信息

    查看linux下面网卡的速度信息 Study From 百度知道 (懒得翻墙) 1. centos机器 安装的比较全(个人比较懒 没有使用core最小化安装, 避免出问题麻烦 公司网络太垃圾) 使用 ...