js實現復選框的全選、全部選和反選
阿新 • • 發佈：2017-05-26
item itl true mon 復選框 loading 實現 align inpu
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>checkbox</title> 6 <style type="text/css"> 7 .main{ 8 width: 400px; 9 height: 400px; 10 margin: 20px auto; 11} 12 li{ 13 list-style: none; 14 text-shadow: 5px 5px 3px rgba(53,56,41,0.5); 15 } 16 h3{ 17 text-align: center; 18 text-shadow: 5px 5px 3px rgba(53,56,41,0.5); 19 color: blue;20 } 21 .boxs,.choice{ 22 position: relative; 23 left: 100px; 24 } 25 </style> 26 27 </head> 28 <body> 29 30 <div class=main> 31 <h3>賽季最佳球員候選</h3> 32 <div class="boxs"> 33<ul> 34 <li><input type="checkbox"/>梅西</li> 35 <li><input type="checkbox"/>內馬爾</li> 36 <li><input type="checkbox"/>蘇亞雷斯</li> 37 <li><input type="checkbox"/>伊列斯塔</li> 38 <li><input type="checkbox"/>羅伯托</li> 39 <li><input type="checkbox"/>拉基蒂奇</li> 40 </ul> 41 </div> 42 <div class="choice"> 43 <button onclick="select(1)">全選</button> 44 <button onclick="select(2)">全不選</button> 45 <button onclick="select(3)">反選</button> 46 </div> 47 </div> 48 49 <script> 50 function select(num) 51 { 52 var items = document.getElementsByTagName(‘input‘) 53 for(var i=0; i<items.length; i++) 54 { 55 switch(num) 56 { 57 case 1:items[i].checked = true;break; 58 case 2:items[i].checked = false;break; 59 case 3:items[i].checked= !items[i].checked;break; 60 61 } 63 } 64 } 65 </script> 66 </body> 67 </html>
js實現復選框的全選、全部選和反選