最终效果：

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>全选功能</title>

         <script>

             function selectAll(choiceBtn){

                 //document.getElementsByTagName()

             var arr=document.getElementsByName("choice");

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

                 arr[i].checked=choiceBtn.checked;//循环遍历看是否全选

             }

             }

         </script>

     </head>

     <body>

         <table border="1" width="800px" height="800px">

             <tr>

                 <td><input type="checkbox" onclick="selectAll(this)" />全选</td><td>用户名</td><td>邮箱</td><td>电话号码</td><td>性别</td><td>操作</td>

             </tr>

             <tr>

                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除  编辑  设置</td>

             </tr>

             <tr>

                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑  设置</td>

             </tr>

             <tr>

                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑  设置</td>

             </tr>

             <tr>

                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑  设置</td>

             </tr>

             <tr>

                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除  编辑  设置</td>

             </tr>

             <tr>

                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除   编辑  设置</td>

             </tr>

             <tr>

                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除  编辑  设置</td>

             </tr>

             <tr>

                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除  编辑  设置</td>

             </tr>

             <tr>

                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑  设置</td>

             </tr>

             <tr>

                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑  设置</td>

             </tr>

         </table>

     </body>

 </html>

全选功能.html

在代码中定义了一个onclick事件

<tr>

				<td><input type="checkbox" onclick="selectAll(this)" />全选</td><td>用户名</td><td>邮箱</td><td>电话号码</td><td>性别</td><td>操作</td>

			</tr>

注意：针对本实例来说不能使用document.getElementsByTagName()获取标签，因为获取的对象不精确。

定义的事件selectAll()

<script>

            function selectAll(choiceBtn){

                //document.getElementsByTagName()

            var arr=document.getElementsByName("choice");

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

                arr[i].checked=choiceBtn.checked;//循环遍历看是否全选

            }

            }

        </script>

JavaScript实现全选功能的更多相关文章

  1. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  2. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  3. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  4. S全选功能代码

    JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...

  5. C# winform中的datagridview控件标头加入checkbox，实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  6. jquery实现全选功能

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...

  7. Form - CHECKBOX全选功能

    FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...

  8. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. Android ListView条目全选功能，不用checkbox实现！

    大家好,翻了翻曾经的笔记,发现了一个我特别标记的功能,那就是ListView全选功能,顿时想起了我那个时候苦逼的生涯,因为我大学机械出身,大学毕业了都不知道什么叫代码,在58干了一段销售.实在是干不下 ...

随机推荐

  1. 采用Extjs MVVM + ThinkPHP 架构开发的思考

    前后台号称都是MVC模式, 后台ThinkPHP框架实际上只提供web操作接口,直接返回json数据,因此只能算有Model和Controller两层, 前台ExtjsMVVM模式实际上就是分模块后的 ...

  2. .NET拾忆:FormData文件上传

    方法1.FormData简单实现 后端: using System; using System.Collections.Generic; using System.IO; using System.L ...

  3. node.js初识01

    1.对于node.js的安装在这里就不做过多的介绍了,安装成功后,可以通过cmd 输入node -v查看node的版本号,如图所示 2.开始我们的hello world,通过cmd进入所属文件夹,输入 ...

  4. 函数max()优化

    函数max的优化 用途:查询最后支付时间-优化max函数 语句: select max(payment_date)from payment 执行计划:

  5. 源码解读 Laravel PHP artisan config:cache

    来源 https://laravel-china.org/articles/5101/source-code-reading-laravel-php-artisan-configcache 源码在哪 ...

  6. 在TensorFlow中运行程序多次报错：AttributeError: __exit__

    我没有记住语句 with tf.Session() as sess: 多次写成了 with tf.Session as sess: 吃括号这个低级的错误又犯了,真不应该,立下flag:以后再犯相同的错 ...

  7. Git-什么是分支

    为了理解什么是分支,我们先要回顾Git是如何存储数据的. Git并不会保存文件的差异值或者说变化量,而是直接保存文件的快照. 在Git中提交时,会保存一个commit对象,该对象包含一个指向暂存内容快 ...

  8. sitecore系统教程之媒体库

    您可以管理媒体库中的所有媒体项目,例如要嵌入网页的图像或供访问者下载的图像.媒体库包含所有媒体项目,例如图像,文档,视频和音频文件. 在媒体库中,您可以: 将所有媒体文件保存在一个位置,并将其组织在与 ...

  9. 使用Hive读取ElasticSearch中的数据

    本文将介绍如何通过Hive来读取ElasticSearch中的数据,然后我们可以像操作其他正常Hive表一样,使用Hive来直接操作ElasticSearch中的数据,将极大的方便开发人员.本文使用的 ...

  10. linux常用命令：ls命令

    ls命令是linux下最常用的命令.ls命令就是list的缩写,缺省下ls用来打印出当前目录的清单,如果ls指定其他目录那么就会显示指定目录里的文件及文件夹清单. 通过ls 命令不仅可以查看linux ...