最终效果：

代码：

 <!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. js和java的参数传递方式实际都是一样的，都是按值传递

    只不过要注意的是字符串类型在java中是对象,在js是基本数据类型,作为参数传递的时候是拷贝值,

  2. Shiro权限管理框架详解

    1 权限管理1.1 什么是权限管理 基本上涉及到用户参与的系统都要进行权限管理,权限管理属于系统安全的范畴,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自己被 ...

  3. [LeetCode] 系统刷题1_代码风格及边界

    代码风格 说自己不清楚的算法,比如KMP,如果解释不清楚或者写不出来的算法建议不提 注意代码的缩进以及空格的合理运用,使得代码看起来比较整洁有条理 注意边界的条件以及越界 误区: 算法想出来还仅仅不够 ...

  4. xshell 禁用铃声 提示音

    xshell 的铃声在操作时比较烦,所以通常会关闭. 操作方法: 工具 > 选项 > 高级, 在“终端”选项下的 “禁用铃声” 前面打上勾, 确定即可.

  5. SEO--质量监测

    日志分析 1.每个搜索引擎的总体抓取量 2.记录搜索引擎蜘蛛的不重复抓取量 3.每个目录.每个搜索引擎的抓取量 4.统计搜索引擎抓取的状态码(通过查看欧化300,404,500等分析那些页面需要优化) ...

  6. vue打包后404，webpack配置问题

    首先声明这是基于vue2.x的 1. 将其中build的配置项assetsPublicPath进行修改,改为上图-->目的是将资源文件的引入路径,改为相对地址(相对index.html) 2.h ...

  7. Solaris 10主机名和IP地址步骤

    1.修改主机名: hostname newname vi /etc/hosts vi /etc/hostname.e1000g0 vi /etc/nodename init 6 #重启 --confi ...

  8. MVC 中url-pattern配置为"/"和"/*"的区别

    首先大家都知道"/*"可以匹配所有url,包括带扩展名的,一般只用在过滤器上. 而"/"很多人理解成不能拦截带扩展名的,这种理解是错误的!它其实也能拦截“.js ...

  9. python爬虫-基础入门-python爬虫突破封锁

    python爬虫-基础入门-python爬虫突破封锁 >> 相关概念 >> request概念:是从客户端向服务器发出请求,包括用户提交的信息及客户端的一些信息.客户端可通过H ...

  10. python入门之列表

    1.列表基本格式# list 类 列表li = [1, 2, 3, "sb", ["时间",[9, 10], "huang"], 6, 7, ...