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. vs的任务列表

    前几天才刚开始看到这个 很多时候,一些任务,怕忘记了,或者已经做好的东西,由于各种原因,暂时不用等等这种情况 这时候,就可以在vs上,随时加到任务列表中,方面下次直接来修改或实现等等 在vs的视图&g ...

  2. Electron 问题

    打包 Mac 桌面程序时报上述错误 E:\research\node\XXX>electron-packager ./ XXX --platform=darwin --arch=x64 --ic ...

  3. tp5页面跳转，空控制器空方法

    namespace app\index\controller; use think\Controller; class Login extends Controller{ //显示html页面 pub ...

  4. 深入了解React组件重新渲染的条件和生命周期

    React组件rerender的真正条件 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true,那么当前组件会rerender 组件的props中的任一 ...

  5. （转载）Android快速开发偷懒必备，一句话搞定所有ViewGroup的Adapter . 支持自定义ViewGroup

    [置顶] [Android]快速开发偷懒必备,一句话搞定所有ViewGroup的Adapter . 支持自定义ViewGroup 标签: androidAdapter快速开发0耦合 2016-12-1 ...

  6. hdu 1394 Minimum Inversion Number 【线段树求逆序数】

    之前写过树状数组的,再用线段树写一下--- #include<cstdio> #include<cstring> #include<iostream> #inclu ...

  7. I'm studying Bootstrap! loading...

    最近在学习bootstrap框架. Bootstrap框架是目前前端最受欢迎的框架,出于Twitter公司!搞前端你说你不会Bootstrap都不好意思见人呢. Bootstrap是基于Html Cs ...

  8. runloop源代码

    https://github.com/zzf073/runloopDemo /** *  调度例程 *  当将输入源安装到run loop后,调用这个协调调度例程,将源注册到客户端(可以理解为其他线程 ...

  9. 浏览器渲染HTML页面步骤

    渲染步骤:浏览器渲染页面时,表示网站资源已经请求成功(要了解查看:浏览器向服务器请求资源过程) 解析HTML以构建dom树--->构建render树--->布局render树---> ...

  10. TensorFlow+实战Google深度学习框架学习笔记（5）----神经网络训练步骤

    一.TensorFlow实战Google深度学习框架学习 1.步骤: 1.定义神经网络的结构和前向传播的输出结果. 2.定义损失函数以及选择反向传播优化的算法. 3.生成会话(session)并且在训 ...