最终效果：

代码：

 <!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模拟队列----小优先队列

    队列:先进先出,后进后出 var Queue = (function(){ var item = new WeakMap(); class Queue{ constructor(){ item.set ...

  2. Facebook的bigpipe

    参考文档:英文版:http://www.cubrid.org/blog/dev-platform/faster-web-page-loading-with-facebook-bigpipe/ 搜索技术 ...

  3. Asp.net Core认证和授权：Cookie认证

    关于asp.net core 的文章,博客园已经有很多大牛写过了. 这里我只是记录下自己在学习中的点滴和一些不懂的地方 Cookie一般是用户网站授权,当用户访问需要授权(authorization) ...

  4. whu 643 Soul Artist(二维BIT 区间更新,单点查询)

    Soul Artis [题目链接]Soul Artis [题目类型]二维BIT &题解: 二维区间更新和一维相比,要容斥一下,更新一块区间就是更新4个点. 还有这个我先是写了2*n^2logn ...

  5. NodeJs笔记 : express框架创建工程 ----- 路由设计

    一.搭建工程 1 .安装 express-generator $ npm install -g express-generator 2 .本地创建express项目 $ express -e blog ...

  6. gitlab覆盖率

    https://danny50610.blogspot.com/2017/09/gitlab-ci-phpunit-coverage.html

  7. storm 001

    Hadoop.Storm系统和组件接口对比表: package storm; import org.apache.storm.Config; import org.apache.storm.Storm ...

  8. Visual Studio快捷键查询

    Ctrl+E,D —-格式化全部代码  Ctrl+E,F —-格式化选中的代码  CTRL + SHIFT + B生成解决方案  CTRL + F7 生成编译  CTRL + O 打开文件  CTRL ...

  9. Oracle10g 连接 sqlserver hsodbc dblink 方式 非透明网关

    Oracle10g 连接 sqlserver hsodbc dblink 方式 非透明网关 那个上传图片太麻烦了,发布到百度文库了 http://wenku.baidu.com/view/b38ae8 ...

  10. hdu5293 lca+dp+树状数组+时间戳

    题意是给了 n 个点的树,会有m条链条 链接两个点,计算出他们没有公共点的最大价值,  公共点时这样计算的只要在他们 lca 这条链上有公共点的就说明他们相交 dp[i]为这个点包含的子树所能得到的最 ...