欢迎访问优讯网!
您当前的位置:首页 > 爱编程

JQuery复选框全选效果如何实现

时间:2020-05-09 09:01:13  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要介绍了JQuery复选框全选效果如何实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
 

Js相关技术

checked属性

如何获取所有复选框:document.getElementsByName、

需求分析

​ 在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理

技术分析

第一种方法:选择器[属性名称='属性值']

$("input[type='checkbox']:gt(0)").prop("checked",this.checked);

第二种方法:使用层级选择器来实现 tbody > tr > td > input

$("tbody > tr > td > input").prop("checked",this.checked);

第三种方法:

// #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
         
        <script>
                         
            /*
             表格全选和全不选
             进一步确定事件: 点击事件
              
             */
            $(function(){
                //绑定点击事件
                //this 代表的是当前函数的所有者
                $("#checkAll").click(function(){
                    //获取当前选中状态
//                  alert(this.checked);
                    //获取所有分类项的checkbox
                    // 选择器[属性名称='属性值']
//     $("input[type='checkbox']:gt(0)").prop("checked",this.checked);
                     
                    //使用层级选择器来实现 tbody > tr > td >
input

  //  $("tbody > tr > td > input").prop("checked",this.checked); //这个可行
 
 //  #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
                    $("input").prop("checked",this.checked);
                     
                });
            });
             
        </script>
    </head>
    <body>
        <table border="1px" width="600px" id="tab">
            <thead>
                <tr >
                    <td>
                        <input type="checkbox" id="checkAll" />
                    </td>
                    <td>分类ID</td>
                    <td>分类名称</td>
                    <td>分类商品</td>
                    <td>分类描述</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                <td>1</td>
                <td>手机数码</td>
                <td>华为,小米,尼康</td>
                <td>黑马数码产品质量最好</td>
                <td>
                    <a href="#" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel=
"external nofollow" rel="external nofollow" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel=
"external nofollow" rel="external nofollow" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" >删除</a>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>2</td>
                <td>成人用品</td>
                <td>充气的</td>
                <td>这里面的充气电动硅胶的</td>
                <td><a href="#" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="
external nofollow"
rel="external nofollow" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" >删除</a></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>3</td>
                <td>电脑办公</td>
                <td>联想,小米</td>
                <td>笔记本特卖</td>
                <td><a href="#" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel=
"external nofollow" rel="external nofollow" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="e
xternal nofollow"
rel="external nofollow" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" >删除</a></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>4</td>
                <td>馋嘴零食</td>
                <td>辣条,麻花,黄瓜</td>
                <td>年货</td>
                <td><a href="#" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel=
"external nofollow" rel="external nofollow" >删除</a></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>5</td>
                <td>床上用品</td>
                <td>床单,被套,四件套</td>
                <td>都是套子</td>
                <td><a href="#" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external
nofollow"
rel="external nofollow" rel="external nofollow" >删除</a></td>
            </tr>
            </tbody>
        </table>
         
    </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/article/186137.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
栏目更新
栏目热门