标签：body length chrome 链接 cee 无效 ret 测试 title
原文链接：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>
以上代码在IE10中测试与张老师文章中的效果有些出入，希望在以后的工作学习中引起注意，并且进行深度研究哈哈~
标签：body length chrome 链接 cee 无效 ret 测试 title
原文地址：http://www.cnblogs.com/LinSL/p/7634939.html
