jQuery如何实现全选、全不选以及反选操作-职坐标

jQuery如何实现全选、全不选以及反选操作

沉沙 2019-01-08 来源：阅读 1589 评论 0

摘要：本篇教程探讨了jQuery如何实现全选、全不选以及反选操作，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇教程探讨了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>