checkbox復選框的一些深入研究與理解（張）
阿新 • • 發佈：2017-10-07
ack 註意 聖誕 return tle script ++ doc div
原文鏈接：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; 10border: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中測試與張老師文章中的效果有些出入，希望在以後的工作學習中引起註意，並且進行深度研究哈哈~
checkbox復選框的一些深入研究與理解（張）