文档章节

32.复选框的全选/全部选

Lucky_Me
 Lucky_Me
发布于 2017/08/22 23:26
字数 364
阅读 9
收藏 0

1.效果

2.代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>各行换色</title>
        <script>
                function checkAll(){
                    
                var allEle = document.getElementById("selectAll");//得到标题行的复选框
                if(allEle.checked==true){//如果标题行的复选框被选中了   通过 getElementsByName 去设置tbody中所有的复选框 设置为选中
                var everyones =    document.getElementsByName("selectOne"); //通过name类获取对象
                        for(var i=0;i<everyones.length;i++){
                            everyones[i].checked=true;
                        }
                }else{
                    var everyones =    document.getElementsByName("selectOne");
                        for(var i=0;i<everyones.length;i++){
                            everyones[i].checked=false;
                        }
                }
                }
        </script>
    </head>
    <body>
        <table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="300px" height="100px" id="tab">
            <thead>
                <tr>
                    <th><input type="checkbox" onclick="checkAll()" id="selectAll"/></th>  <!--这里注意绑定了事件,还给了id-->
                <th>姓名</th>
                <th>年龄</th>
                <th>家庭地址</th>
            </tr>
            </thead>
            <tbody>
                <!--每一个tr都 给了一个name属性-->
                <tr>
                    <td><input type="checkbox" name="selectOne" /></td>
                <td>张三</td>
                <td>15</td>
                <td>陕西西安</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="selectOne" /></td>
                <td>李四</td>
                <td>26</td>
                <td>北京海淀区</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="selectOne" /></td>
                <td>小五</td>
                <td>24</td>
                <td>天津大港</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="selectOne" /></td>
                <td>小六</td>
                <td>26</td>
                <td>上海浦东</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="selectOne" /></td>
                <td>小七</td>
                <td>23</td>
                <td>广东广州</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="selectOne"/></td>
                <td>张萌</td>
                <td>12</td>
                <td>重庆</td>
            </tr>
            </tbody>
        </table>
    </body>
</html>
 

© 著作权归作者所有

Lucky_Me
粉丝 16
博文 234
码字总数 89806
作品 0
美国
私信 提问
JavaScript 基础--- (经典案例)

案例一:全选练习 ** 使用复选框上面一个属性判断是否选中 - checked属性 - checked=true:选中 - checked=false:不选中 创建一个页面 * 复选框和按钮 - 四个复选框表示爱好 - 还有一个复选...

姜白告
2018/08/01
0
0
小博老师演示常用JQuery效果 ——复选框全选和反选效果

[理论知识] 我们在实际开发应用程序的过程中,经常会遇到复选框全选和反选的效果需求,本文小博老师就为大家演示一下,如何使用JQuery框架实现复选框全选和反选的效果。 [步骤解读一]界面布局...

博为峰教研组
2016/11/18
39
0
jquery全选小功能

背景需求:全选,取消全选,以及全部选中后自动勾选全选,全选后取消一个时同时自动取消全选(不知道怎么描述这个功能,就这么解释吧。。。) html代码如下: <input type="checkbox" id="c...

奔跑的菜菜
2015/10/14
95
2
微信小程序实现购物车页面

设计思路: 一、从网络上传入以下Json数据格式的数组 1.购物车id:cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected 二、点击复选框toggle操作 如已经选中的,经...

Jansens
2016/10/25
142
0
jQuery 表单应用:全选/取消全选,表单验证,网页选项卡切换

应用一:单行文本框应用 需要用到的 API focus([[data],fn]) --> 当元素获得焦点时,触发 focus 事件 blur([[data],fn]) --> 当元素失去焦点时,触发 blur 事件...

frwupeng517
2016/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
57分钟前
4
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
59分钟前
8
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
今天
4
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
今天
6
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
6
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部