1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script> 9 window.onload = function(){ 10 function fun(check,func){ 11 var btn =document.getElementById(check); 12 btn.onclick = func; 13 } 14 fun(‘checkedallbtn‘,function(){ 15 var items = document.getElementsByName(‘items‘); 16 for(var a=0;a<items.length;a++){ 17 items[a].checked=true; 18 } 19 }); 20 //全不选 21 fun(‘checkednobtn‘,function(){ 22 var items = document.getElementsByName(‘items‘); 23 for(var a=0;a<items.length;a++){ 24 items[a].checked = false; 25 } 26 }); 27 //反选 猜测if语句 28 fun(‘checkedboxrebtn‘,function(){ 29 var items = document.getElementsByName(‘items‘); 30 for(var a=0;a<items.length;a++){ 31 if(items[a].checked == true){ 32 items[a].checked=false; 33 }else{items[a].checked=true} 34 } 35 }); 36 //提交 思路先获取value值 37 fun(‘sendbtn‘,function(){ 38 var items = document.getElementsByName(‘items‘); 39 for(var a=0;a<items.length;a++){ 40 if(items[a].checked == true){alert(items[a].value)} 41 } 42 }); 43 //全选思路 还是if判断 先获取全选 44 /* var checkallbox = document.getElementById(‘checkallbox‘); 45 checkallbox.onclick=function(){ 46 var items = document.getElementsByName(‘items‘); 47 for(var a=0;a<items.length;a++){ 48 if(checkallbox.checked == true){ 49 items[a].checked=true; 50 }else{items[a].checked=false} 51 } 52 } */ 53 fun(‘checkallbox‘,function() { 54 var items = document.getElementsByName(‘items‘); 55 for(var a=0;a<items.length;a++){ 56 if(checkallbox.checked == true){ 57 items[a].checked=true; 58 }else{items[a].checked=false} 59 } 60 }) 61 } 62 </script> 63 </head> 64 <body> 65 <form method="POST" action=""> 66 你的爱好是？<input type="checkbox" id="checkallbox"/>全选/全不选 67 <input type="checkbox" name="items" value="足球">足球 68 <input type="checkbox" name="items" value="羽毛球">羽毛球 69 <input type="checkbox" name="items" value="篮球">篮球 70 <input type="checkbox" name="items" value="乒乓球">乒乓球 71 <input type="button" id="checkedallbtn" value="全选"> 72 <input type="button" id="checkednobtn" value="全不选"> 73 <input type="button" id="checkedboxrebtn" value="反选"> 74 <input type="button" id=‘sendbtn‘ value="提交"> 75 </form> 76 </body> 77 </html>
原文：https://www.cnblogs.com/inkser/p/14426670.html