摘要:本篇教程探讨了jQuery如何实现全选、全不选以及反选操作,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇教程探讨了jQuery如何实现全选、全不选以及反选操作,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
代码,如下:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <h3>我的爱好</h3>
11 <ul>
12 <li>
13 <input type="checkbox" class="sAll"/>全选 <input type="checkbox" class="sNone"/>全不选
14 <input type="checkbox" class="Inverse"/>反选
15 </li>
16 <li><input type="checkbox" class="check"/>篮球</li>
17 <li><input type="checkbox" class="check"/>足球</li>
18 <li><input type="checkbox" class="check"/>排球</li>
19 <li><input type="checkbox" class="check"/>羽毛球</li>
20 <li><input type="checkbox" class="check"/>乒乓球</li>
21
22 </ul>
23 <script src="jquery.js"></script>
24 <script>
25 /*全选*/
26 //1.拿到全选复选框的jquery对象调用change(),当前对象的状态改变时进行下面操作
27 $('.sAll').change(function () {
28 //2.拿到所有class属相值为check的对象,将其checked属性值设置为true。
29 $('.check').attr('checked',true);
30
31 //点击全选,全不选、反选其中一个时其它两的选中状态清除
32 $('.sNone').attr('checked',false);
33 $('.Inverse').attr('checked',false);
34 });
35 //alert($('.sAll').attr('checked'));
36 /*全不选*/
37 $('.sNone').change(function () {
38 $('.check').attr('checked',false);
39
40 //点击全选,全不选、反选其中一个时其它两的选中状态清除
41 $('.sAll').attr('checked',false);
42 $('.Inverse').attr('checked',false);
43 });
44 /*反选*/
45 //注意:attr()方法取第一个的值 ,赋值所用
46 $('.Inverse').change(function () {
47 //遍历所有要操作的复选框
48 $('.check').each(function () {
49 //如果该复选框的checked属性为true,则改为false,反之为true
50 if($(this).attr('checked')){
51 $(this).attr('checked',false);
52 }else{
53 $(this).attr('checked',true);
54 }
55
56 });
57 //将全选和全不选的状态去掉(点击全选,全不选、反选其中一个时其它两的选中状态清除)
58 $('.sAll').attr('checked',false);
59 $('.sNone').attr('checked',false);
60 });
61 </script>
62 </body>
63 </html>
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号