首页 > 代码库 > js实现复选框的全选、全部选和反选
js实现复选框的全选、全部选和反选
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实现复选框的全选、全部选和反选
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。