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

最新推荐文章于 2023-05-15 18:21:17 发布

weixin_30808575

最新推荐文章于 2023-05-15 18:21:17 发布

阅读量358

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lidonglin/p/9836172.html

版权

 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>

转载于:https://www.cnblogs.com/lidonglin/p/9836172.html

weixin_30808575

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checked 完整版全选，单选，反选

1 <!DOCTYPE html> 2 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <link rel="stylesheet" href="css/style.css" /> 7 <script type="...
复制链接

扫一扫