checked 完整版全选，单选，反选 

 1 <!DOCTYPE html>
 2 <html>
 4     <head>
 5         <meta charset="UTF-8">
 6         <link rel="stylesheet" href="css/style.css" />
 7         <script type="text/javascript" src="js/jquery-1.10.2.js" ></script>
 8         <title>反选/反选/全不选/单选</title>
 9         <style>
10             *{
11                 padding: 0;
12                 margin: 0;
13             }
14             .nav{
15                 margin-top: 20px;
16                 margin-left: 50px;
17             }
18             .nav>label{
19                 display: inline-block;
20                 width: 100px;
21                 margin: auto
22             }
23             input{
24                 vertical-align: middle;
25                 margin-right: 6px;
26             }
27             .select{
28                 margin-left: 50px;
29                 margin-top: 30px;
30             }
31         </style>
32     </head>
33     <body>
34         <div class="nav">
35             <label><input class="allcheck" type="checkbox" />全选</label>
36             <label><input class="reversecheck" type="checkbox" />反选</label>
37             <label><input class="nonecheck" type="checkbox" />全不选</label>
38         </div>
39         <ul class="select">
40             <li><label><input class="onecheck" type="checkbox" />博客园</label></li>
41             <li><label><input class="onecheck" type="checkbox" />博客园</label></li>
42             <li><label><input class="onecheck" type="checkbox" />博客园</label></li>
43             <li><label><input class="onecheck" type="checkbox" />博客园</label></li>
44             <li><label><input class="onecheck" type="checkbox" />博客园</label></li>
45             <li><label><input class="onecheck" type="checkbox" />博客园</label></li>
46         </ul>
47         <script>
48             //全选
49             $(".allcheck").on("click",function(){
50                 var isSelect = this.checked;
51                 if (isSelect) {
52                     $(".reversecheck").prop("checked", false);
53                     $(".nonecheck").prop("checked", false);
54                     $('.onecheck').each(function () {
55                         $(this).prop("checked", true)
56                     });
57                 }
58                 else {
59                     $(".onecheck").prop("checked", false)
60                 }
61             })
62             // 反选
63             $(".reversecheck").on("click",function(){
64                 var oneSelect = $(".onecheck");
65                 var isSelect = this.checked;
66                 if (isSelect) {
67                     $(".allcheck").prop("checked", false);
68                     for (var i = 0; i < oneSelect.length; i++) {
69                         var e = oneSelect[i];
70                         e.checked = !e.checked;
71                     }
72                 }
73             })
74             // 全不选
75             $(".nonecheck").on("click",function(){
76                 $(".onecheck").prop("checked", false);
77                 $(".allcheck").prop("checked", '');
78                 $(".reversecheck").prop("checked", '');
79             })
80             // 单选
81             $(".onecheck").on("click",function(){
82                 var flag = true;
83                 $(".onecheck").each(function () {
84                     if (!this.checked) {
85                         flag = false;
86                     }
87                 })
88                 if (flag) {
89                     $(".allcheck").prop('checked', true);
90                     $(".reversecheck").prop("checked", '');
91                     $(".nonecheck").prop("checked", '');
92                 } else {
93                     $(".allcheck").prop('checked', '');
94                 }
95             })
96         </script>
97     </body>
98 </html>

 

posted @ 2018-10-23 13:41  傲似小仙女  阅读(975)  评论(0)    收藏  举报