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. SQL*PLUS命令的使用大全

    Oracle的sql*plus是与oracle进行交互的客户端工具.在sql*plus中,可以运行sql*plus命令与sql*plus语句. 我们通常所说的DML.DDL.DCL语句都是sql*pl ...

  2. layedit图片上传接口案列

    html部分 <divclass="layui-form-item"> <labelfor="tname"class="layui- ...

  3. PHP 导出excel 数据量大时

    public function ceshiexcel1(){ set_time_limit(0); $filename = '病毒日志'; header('Content-Type: applicat ...

  4. Element-ui组件--pagination分页的使用

    一般在写前端页面时,经常会遇到分页这样的效果,element-ui中便有这样的插件,用vue框架使用的很方便,在此做一总结: <template> <div class=" ...

  5. Xcode7 下导入第三方库 图文介绍

    网上没有很好的图文介绍,干脆我自己写一个好了,方便新手入门. 这里以导入著名的第三方网络库AFNetWorking v3.0.4和数据库FMDB v2.6.2为例进行说明. 好,下面开始. 下载源文件 ...

  6. ZBrush设计制作小怪兽并用KeyShot渲染

    ZBrush为电影制作设计独特的生物概念重点向大家介绍了概念设计师Ian Joyner使用ZBrush®3D图形绘制软件雕刻面对镜头咆哮的生物半身像的具体过程,ZBrush创建好模型之后,要想让角色更 ...

  7. MySQL_索引原理与慢查询优化

    索引原理与慢查询优化 创建/删除索引的语法 #方法一:创建表时 CREATE TABLE 表名 ( 字段名1 数据类型 [完整性约束条件…], 字段名2 数据类型 [完整性约束条件…], [UNIQU ...

  8. 从源码中查看当前android版本

    从文件build/core/version_defaults.mk查找PLATFORM_VERSION例如:PLATFORM_VERSION.OPM1 := 8.1.0

  9. vue2.0变化(转载)

    原文链接:https://www.cnblogs.com/itbainianmei/p/6062249.html 1.每个组件模板template,不再支持片段代码 之前: <template& ...

  10. BZOJ 3697/3127 采药人的路径 (点分治)

    题目大意: 从前有一棵无向树,树上边权均为$0$或$1$,有一个采药人,他认为如果一条路径上边权为$0$和$1$的边数量相等,那么这条路径阴阳平衡.他想寻找一条合法的采药路径,保证阴阳平衡.然后他发现 ...