js复选框实现全选、全不选、反选

最新推荐文章于 2022-12-13 22:34:38 发布

weixin_30808693

最新推荐文章于 2022-12-13 22:34:38 发布

阅读量229

点赞数

原文链接：http://www.cnblogs.com/yuer20180726/p/11152408.html

版权

复选框为checkbox对象

通过input就可以将一个简单的复选框呈现在页面上

<input type="checkbox" />

要实现的大概就是这样一个页面

思路

全选

因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同

反选

同样的方法得到复选框数组，遍历的时候判断如果checked值为true则改为false，checked值为false则改为true

最上面的全选/全不选功能

通过id获得最上面的复选框，判断其checked值若为true则将所有的复选框设置为true,为false则设置为false

注意

为什么不是true的时候设置为false呢？因为当点击的时候复选框已发生变化，这个时候，下面的复选框应该是与上面一致的

源代码如下

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>复选框</title>
 7 
 8     <style type="text/css">
 9         
10     </style>
11 </head>
12 
13 <body>
14     <input type="checkbox" id="boxid" οnclick="setAllNo()" />全选/全不选
15     <br />
16     <input type="checkbox" name="love" />篮球
17     <br />
18     <input type="checkbox" name="love" />排球
19     <br />
20     <input type="checkbox" name="love" />羽毛球
21     <br />
22     <input type="checkbox" name="love" />乒乓球
23     <br />
24     <input type="button" value="全选" οnclick="setAll()" />
25     <input type="button" value="全不选" οnclick="setNo()" />
26     <input type="button" value="反选" οnclick="setOthers()" />
27 
28     <script type="text/javascript">
29         //全选函数
30         function setAll() {
31             var loves = document.getElementsByName("love");
32             for (var i = 0; i < loves.length; i++) {
33                 loves[i].checked = true;
34             }
35         }
36 
37         //全不选函数
38         function setNo() {
39             var loves = document.getElementsByName("love");
40             for (var i = 0; i < loves.length; i++) {
41                 loves[i].checked = false;
42             }
43         }
44 
45         //反选
46         function setOthers() {
47             var loves = document.getElementsByName("love");
48             for (var i = 0; i < loves.length; i++) {
49                 if (loves[i].checked == false)
50                     loves[i].checked = true;
51                 else
52                     loves[i].checked = false;
53             }
54         }
55         
56         //全选/全不选操作
57         function setAllNo(){
58             var box = document.getElementById("boxid");
59             var loves = document.getElementsByName("love");
60             if(box.checked == false){
61                 for (var i = 0; i < loves.length; i++) {
62                     loves[i].checked = false;
63                 }
64             }else{
65                 for (var i = 0; i < loves.length; i++) {
66                     loves[i].checked = true;
67                     }
68             }
69         }
70     </script>
71 
72 </body>
73 
74 </html>

例子2

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5         <title>全选，反选按钮</title>
  6         <script type="text/javascript">
  7             window.οnlοad=function(){
  8                 /*
  9                  *1 #checkedAllBtn 
 10                  * 2 #checkedBoBtn
 11                  * 3 #checkedRevBtn
 12                  * 4 #sendBtn
 13                  * 5 #checkedAllBox
 14                  * 6 #items
 15                  * */
 16                  
 17                 var checkedAllBtn = document.getElementById("checkedAllBtn");
 18                 //checkedAllBox
 19                 var checkedAllBox = document.getElementById("checkedAllBox");
 20                  
 21                 checkedAllBtn.onclick = function(){
 22                      
 23                     //获取四个多选框items
 24                     var items = document.getElementsByName('items');
 25                      
 26                     //遍历items
 27                     for(var i=0;i<items.length;i++)
 28                     {
 29                         //设置四个多选框变成选中状态
 30                         //通过多选框的checked属性可获取或设置选中状态
 31                         items[i].checked = true;
 32                          
 33                     }
 34                      
 35                         //将checkedAllBox设置为选中状态
 36                 checkedAllBox.checked = true;
 37                      
 38                      
 39                 };
 40                  
 41                 //全不选按钮
 42                 var checkedNoBtn = document.getElementById("checkedNoBtn");
 43                  
 44                 checkedNoBtn.onclick = function(){
 45                     //获取四个多选框items
 46                     var items = document.getElementsByName('items');
 47                      
 48                     //遍历items
 49                     for(var i=0;i<items.length;i++)
 50                     {
 51                         //设置四个多选框变成选中状态
 52                         //通过多选框的checked属性可获取或设置选中状态
 53                         items[i].checked = false;
 54                          
 55                     }
 56                      
 57                         //将checkedAllBox设置为选中状态
 58                 checkedAllBox.checked = false;
 59                      
 60                 };
 61                  
 62                 //反选  也要判断是否都需要全部选中
 63                 var checkedRevBtn = document.getElementById("checkedRevBtn");
 64                  
 65                 checkedRevBtn.onclick = function(){
 66                     //获取四个多选框items
 67                     var items = document.getElementsByName('items');
 68                      
 69                             checkedAllBox.checked = true;
 70                      
 71                     //遍历items
 72                     for(var i=0;i<items.length;i++)
 73                     {
 74                         //设置四个多选框变成选中状态
 75                         //通过多选框的checked属性可获取或设置选中状态
 76                         items[i].checked = !items[i].checked;
 77                          
 78                          
 79                         if(!items[i].checked){
 80                         //一旦进入判断，则证明不是全选状态
 81                         //将checkedAllBox设置为没选中状态
 82                         checkedAllBox.checked = false;
 83                          
 84                     }
 85                          
 86                     }
 87                      
 88                 };
 89                  
 90                 //提交按钮
 91                 var sendBtn = document.getElementById("sendBtn");
 92                 sendBtn.onclick = function(){
 93                         var items = document.getElementsByName('items');
 94                     //遍历 items
 95                     for(var i=0; i<items.length;i++)
 96                     {
 97                         //判断多选框是否选中
 98                         if(items[i].checked){
 99                             alert(items[i].value);
100                         }
101                     }
102                 };
103                  
104                  
105                 checkedAllBox.onclick = function(){
106                     var items = document.getElementsByName('items');
107                      
108                     //遍历items
109                     for(var i=0;i<items.length;i++)
110                     {
111                         //设置四个多选框变成选中状态
112                         items[i].checked = this.checked;
113                          
114                     }
115                      
116                      
117                      
118                      
119                      
120                 };
121                  
122                 //items
123                  
124                 //如果四个多选框全都选中，则checkedAllBox也应该选中
125                 //如果四个多选框都没选中，则checkedAllBox也应该没选中
126                     var items = document.getElementsByName('items');
127                 //为四个多选框分别绑定点击响应函数
128         for(var i=0 ; i<items.length ; i++){
129             items[i].onclick = function(){
130                  
131                 //将checkedAllBox设置为选中状态
132                 checkedAllBox.checked = true;
133                  
134                 for(var j=0 ; j<items.length ; j++){
135                     //判断四个多选框是否全选
136                     //只要有一个没选中则就不是全选
137                     if(!items[j].checked){
138                         //一旦进入判断，则证明不是全选状态
139                         //将checkedAllBox设置为没选中状态
140                         checkedAllBox.checked = false;
141                         //一旦进入判断，则已经得出结果，不用再继续执行循环
142                         break;
143                     }
144                      
145                 }
146                  
147                  
148                  
149             };
150         }
151                  
152                  
153             }
154              
155         </script>
156     </head>
157     <body>
158          
159         <form method="post" action="">
160         你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
161          
162         <br />
163         <input type="checkbox" name="items" value="足球" />足球
164         <input type="checkbox" name="items" value="篮球" />篮球
165         <input type="checkbox" name="items" value="羽毛球" />羽毛球
166         <input type="checkbox" name="items" value="乒乓球" />乒乓球
167         <br />
168         <input type="button" id="checkedAllBtn" value="全　选" />
169         <input type="button" id="checkedNoBtn" value="全不选" />
170         <input type="button" id="checkedRevBtn" value="反　选" />
171         <input type="button" id="sendBtn" value="提　交" />
172     </form>
173     </body>
174 </html>