1、我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)和全不选，显示效果如下：

2、步骤分析：

第一步：确定事件(onclick)并为其绑定一个函数（事件绑定到编号前面的复选框里面）

第二步：书写函数(获取编号前面的复选框，获取其状态)　

　　获取编号前面的复选框的状态(是否选中)

获取复选框：var checkAllEle = document.getElementById(“id”)

获取复选框的状态：checkAllEle.checked?

第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)

　　获取下面所有的复选框：

document.getElementsByName(“name”);

第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)

3、具体代码实现：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>复选框的全选和全不选</title>

         <script>

             function checkAll(){

                 //1.获取编号前的复选框

                 var checkAllEle=document.getElementById("checkAll");

                 //2.对编号前面复选框的状态进行判断

                 if(checkAllEle.checked==true){

                     //3.获取下面所有的复选框

                     var checkOnes=document.getElementsByName("checkOne");

                     //4.对获取的所有复选框进行遍历

                     for(var i=0;i<checkOnes.length;i++){

                         //5.拿到每一个复选框，并将其状态视为选中

                         checkOnes[i].checked=true;

                     }

                 }else{

                     //6.获取下面所有的复选框

                     var checkOnes=document.getElementsByName("checkOne");

                     //7.对获取的所有复选框进行遍历

                     for(var i=0;i<checkOnes.length;i++){

                         //5.拿到每一个复选框，并将其状态视为未选中

                         checkOnes[i].checked=false;

                     }

                 }

             }

         </script>

     </head>

     <body>

         <table border="1" width="500" height="50" align="center" >

             <thead>

                 <tr>

                     <td colspan="4">

                         <input type="button" value="添加" />

                         <input type="button" value="删除" />

                     </td>

                 </tr>

                 <tr>

                     <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>

                     <th>编号</th>

                     <th>姓名</th>

                     <th>年龄</th>

                 </tr>

             </thead>

             <tbody>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>1</td>

                     <td>张三</td>

                     <td>22</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>2</td>

                     <td>李四</td>

                     <td>25</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>3</td>

                     <td>王五</td>

                     <td>27</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>4</td>

                     <td>赵六</td>

                     <td>29</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>5</td>

                     <td>田七</td>

                     <td>30</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>6</td>

                     <td>汾九</td>

                     <td>20</td>

                 </tr>

             </tbody>

         </table>

     </body>

 </html>

在谷歌浏览器内运行，实现的效果和需求一样，点击第一个复选框下面所有的复选框全部选中，取消第一个复选框下面所有的复选框全部取消。

JavaScript学习——使用JS完成全选和全不选操作的更多相关文章

  1. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  2. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  3. JavaScript学习06 JS事件对象

    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...

  4. JavaScript学习03 JS函数

    JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...

  5. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  6. JAVAscript学习笔记 js句柄监听事件 第四节 （原创） 参考js使用表

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

  7. JavaScript学习——使用JS完成页面定时弹出广告

    1.获取图片的位置(document.getElementById(“”))  隐藏图片:display:none 定时操作:setInterval(“显示图片的函数”,3000); 2.步骤分析 ( ...

  8. JavaScript学习笔记——JS中的变量复制、参数传递和作用域链

    今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...

  9. 【JavaScript学习】-JS内置对象3-String对象

    定义: 定义字符串的方法就是直接赋值,例如:var mystr="Javascript is good!"; 访问字符串的属性: length属性 eg:var myl=mystr ...

随机推荐

  1. nginx报错日志：see security.limit_extensions

    访问出现部分.js.css等部分文件被拒绝错误日志如下: 19:20:13 [error] 1181#0: *287 FastCGI sent in stderr: "Access to t ...

  2. spring事务，TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();

    在aop配置事务控制或注解式控制事务中,try...catch...会使事务失效,可在catch中抛出运行时异常throw new RuntimeException(e)或者手动回滚Transacti ...

  3. mybatis通用的crud的接口

    http://git.oschina.net/jrl/mybatis-mapper https://www.oschina.net/p/mybatis-plus

  4. BZOJ2440: [中山市选2011]完全平方数(莫比乌斯+容斥原理)

    2440: [中山市选2011]完全平方数 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 4920  Solved: 2389[Submit][Sta ...

  5. mac 下安装mcrypt 扩展

    参考: http://coolestguidesontheplanet.com/how-to-install-mcrypt-for-php-on-mac-osx-lion-10-7-developme ...

  6. POJ 3624 Charm Bracelet【01背包】

    解题思路:直接套公式就能做的01背包, for(i=1;i<=n;i++) { for(v=w[i];v<=m;v++) f[i,v]=max(f[i,v],f[i-1,v-w[i]]+d ...

  7. 指定的WSDL可能与所选的工具包不兼容

    使用LoadRunner在webservice协议下,import service的时候,报错: can not fetch WSDL,the specified WSDL datathe speci ...

  8. Unity碰撞和触发的区别

    碰撞的必要条件: 2个都有Collider,且至少有一个刚体.带刚体的身上会检测OnCollision事件,stay就是2个一直在碰着. 触发的必要条件: 至少有一个碰撞器勾选了IsTrigger,至 ...

  9. These relative modules were not found:...{"sourceM ap":false} 报错解决

    今天在使用vue2.0 + webpack 时,没有动过任何配置文件,也没更新依赖,但是报下面的错误: These relative modules were not found: * ./star1 ...

  10. HDU1027 Ignatius and the Princess II（ 逆康托展开 ）

    链接:传送门 题意:给出一个 n ,求 1 - n 全排列的第 m 个排列情况 思路:经典逆康托展开,需要注意的时要在原来逆康托展开的模板上改动一些地方. 分析:已知 1 <= M <= ...