最终效果：

代码：

 <!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. wordvector to sentence vector

    wordvector已经通过word2vec训练出来了,可是如何通过WV得到SV(Sentence Vector)? 思路1: 直接将句子的向量叠加取平均:效果很不好,每个词没有考虑权重,获取的向量会 ...

  2. CentOS6.5 安装openssl

    安装比较简单! 1.下载安装包 [root@mycentos ~]# wget http://www.openssl.org/source/openssl-1.0.2f.tar.gz 2.解压和编译 ...

  3. chrome debug 服务端性能

    设置 http header 在 chrome 查看服务端性能 \Yii::$app->getResponse()->headers->set('Server-Timing', 'c ...

  4. iOS 第三方框架-SDWebImage

    iOS中著名的牛逼的网络图片处理框架.包含的功能:图片下载.图片缓存.下载进度监听.gif处理等等.用法极其简单,功能十分强大,大大提高了网络图片的处理效率.国内超过90%的iOS项目都有它的影子. ...

  5. cocos2d JS 利用定时器实现-倒计时功能

    //创建一个定时器 cc.director.getScheduler().schedule(this, this.updates, 1, cc.REPEAT_FOREVER, 0, false, &q ...

  6. Cocos2d-JS studio基础控件的使用

    在studio里把几个基础控件往场景文件一拖,然后导出json格式的资源文件 逻辑代码如下: 1 var HelloWorldLayer = cc.Layer.extend({ 2 sprite:nu ...

  7. keras模型的保存与重新加载

    # 模型保存JSON文件 model_json = model.to_json() with open('model.json', 'w') as file: file.write(model_jso ...

  8. webpack打包jQuery,jQuery未定义

    怎么来兼容老式jQuery插件 ProvidePlugin + expose-loader / externals 1.ProvidePlugin + expose-loader webpack.co ...

  9. jQuery-切换事件2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. selenium获取文本

    # 标题list_title = driver.find_elements_by_xpath('//*[@id="share-content"]/div/div[1]/ul/li/ ...