首页 > > 网页制作 > css >

checkbox复选框的一些深入研究与理解（张）

2018-06-24 01:55:50来源：未知阅读 ()

原文链接：http://www.zhangxinxu.com/wordpress/?p=466

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>checkbox</title>
 6     <style>
 7         .demo1,.demo2,.demo3{
 8             width: 500px;
 9             height: 200px;
10             border:1px solid #ccc;
11             margin:0 auto;
12             /*margin-top: 200px;*/
13         }
14         li{
15             list-style: none;
16         }
17         #btest01{
18             /*这里在IE10,ff55,chrome60下测试均有效*/
19             margin-right: 0px;
20         }
21         #btest02{
22             /*这里在IE10,ff55,chrome60下测试均无效*/
23             border: 6px solid #3453b8;
24             background: #beceeb;
25         }
26         /* demo2通过设置font-family和复选框样式实现复选框与文字的对齐 */
27         .demo2{
28             font-size:12px;
29             font-family: Tahoma;
30         }
31         .checkbox{
32             vertical-align: middle;
33             margin-top:0;
34         }
35 
36     </style>
37 </head>
38 <body>
39     <div class="demo1">
40 
41         <li style="font-size: 10px;"><input type="checkbox" id="btest01">复选框10</li>
42         <li style="font-size: 12px;"><input type="checkbox" id="btest02">复选框12</li>
43         <li style="font-size: 14px;"><input type="checkbox" >复选框14</li>
44         <li style="font-size: 16px;"><input type="checkbox" >复选框16</li>
45         <li style="font-size: 10px;"><input type="checkbox" >shdfuan10</li>
46         <li style="font-size: 12px;"><input type="checkbox" >shdfuan12</li>
47         <li style="font-size: 14px;"><input type="checkbox" >shdfuan14</li>
48         <li style="font-size: 16px;"><input type="checkbox" >shdfuan16</li>
49     </div>
50     <div class="demo2">
51         <li style="font-size: 10px;"><input type="checkbox" class="checkbox">复选框10</li>
52         <li style="font-size: 12px;"><input type="checkbox" class="checkbox">复选框12</li>
53         <li style="font-size: 14px;"><input type="checkbox" class="checkbox">复选框14</li>
54         <li style="font-size: 16px;"><input type="checkbox" class="checkbox">复选框16</li>
55         <li style="font-size: 10px;"><input type="checkbox" class="checkbox">shdfuan10</li>
56         <li style="font-size: 12px;"><input type="checkbox" class="checkbox">shdfuan12</li>
57         <li style="font-size: 14px;"><input type="checkbox" class="checkbox">shdfuan14</li>
58         <li style="font-size: 16px;"><input type="checkbox" class="checkbox">shdfuan16</li>
59     </div>
60     <!-- 判断复选框是否被选中 -->
61     <div class="demo3">
62         <input type="checkbox" name="test" />圣诞节    
63         <input type="checkbox" name="test" />股市
64         <input type="checkbox" name="test" />阿凡达    
65         <input type="checkbox" name="test" />十月围城
66         <input type="checkbox" name="test" />水价上调
67         <input type="button" value="检测" id="btn" />
68     </div>
69     <script>
70         var btn = document.getElementById("btn");
71         var test = document.getElementsByName("test");
72         btn.onclick = function(){
73             //这里张用var i=1; i<=test.length; i+=1,而不是 for(var i=0; i<test.length; i++){ },是因为当代码很多的时候，阅读体验更好。(可做适当参考。)
74             for(var i=1; i<=test.length; i+=1){
75                 if(test[i-1].checked){
76                     alert("当前有选中！");
77                     return;
78                 }
79             }
80             alert("一个也没有选！");
81         };
82         // 全选或反选
83         var btn = document.getElementById("btn");
84         var test = document.getElementsByName("test");
85         btn.onclick = function(){
86             for(var i=1; i<=test.length; i+=1){
87                 if(test[i-1].checked){
88                     test[i-1].checked = false;
89                 }else{
90                     test[i-1].checked = true;
91                 }
92             }
93         };
94     </script>
95 
96 
97 </body>
98 </html>