最终效果：

代码：

 <!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. [LeetCode] 154. Find Minimum in Rotated Sorted Array II_Hard

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  2. iOS 阅读唐巧博客心得

    1. iOS 开发中的争议(一) http://blog.devtang.com/2015/03/15/ios-dev-controversy-1/ 文中提及到,在使用的时候,应该是使用self.pr ...

  3. ida6.8 android so调试

    献给还不会的同学. 我的设备 1.魅族手机,自带root功能 2.ida6.8 1.上传ida 目录下dbgsrv/android_server 到 手机上,这个目录自己可以修改,网上都用的adb p ...

  4. unity3d-代码控制游戏角色控制器移动

    先上一个gif看看效果.因为图片大小限制.所以录制的比较小.个人认为效果比较牵强.特别是里面的逻辑代码. 不过我还是认为一切是为了先实现,因为我是刚接触的新手. 工程结构图 这次实现的效果是: 1:摄 ...

  5. 5.用JQuery实现选中select里面的option显示对应的div

    用JQuery实现选中select里面的option显示对应的div HTML: <select name=""  onchange="select(this)&q ...

  6. 日线做多，15min做空的情况收集

  7. 编写一个程序解决选择问题。令k=N/2。

    import java.util.Arrays; /** * 选择问题,确定N个数中第K个最大值 * @author wulei * 将前k个数读进一个数组,冒泡排序(递减),再将剩下的元素逐个读入, ...

  8. RSA加解密 公钥加密私钥解密 公加私解 && C++ 调用openssl库 的代码实例

    前提:秘钥长度=1024 ============================================== 对一片(117字节)明文加密 ========================= ...

  9. python windows 安装pandas,numpy....

    用cmd进入python的安装目录的sripts文件夹下,输入pip install pandas 等它自己下载安装完成,提示

  10. python中impyla包报'TSocket' object has no attribute 'isOpen'错误

    经搜索得知,是thrift-sasl的版本太高了(0.3.0),故将thrift-sasl的版本降级到0.2.1 pip install thrift-sasl==0.2.1 经测试impyla 可以 ...