1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <form action="" method="post"> 9 9 你喜欢什么运动？<input type="checkbox" id="btn" value=""/> 全选/全不选<br /> 10 10 <input type="checkbox" name="item" id="" value="" />篮球 11 11 <input type="checkbox" name="item" id="" value="" />足球 12 12 <input type="checkbox" name="item" id="" value="" />羽毛球 13 13 <input type="checkbox" name="item" id="" value="" />排球 14 14 </form> 15 15 <br /> 16 16 <input type="button" id="btn1" value="全选"/> 17 17 <input type="button" id="btn2" value="全不选"/> 18 18 <input type="button" id="btn3" value="反选"/> 19 19 <input type="button" id="btn4" value="提交"/> 20 20 <script type="text/javascript"> 21 21 window.onload = function(){ 22 22 var btnall = document.getElementById("btn1"); 23 23 var btnno = document.getElementById("btn2"); 24 24 var btnrev = document.getElementById("btn3"); 25 25 var btnsub = document.getElementById("btn4"); 26 26 var btn = document.getElementById("btn"); 27 27 var items =document.getElementsByName("item"); 28 28 var len = items.length; 29 29 for(let i = 0; i<len ; i++){ 30 30 items[i].onclick=()=>{ 31 31 btn.checked = true; 32 32 for(let i=0; i<len ; i++){ 33 33 if(!items[i].checked){ 34 34 btn.checked=false; 35 35 } 36 36 } 37 37 } 38 38 } 39 39 btn.onclick=()=>{ 40 40 for(let i = 0;i<len;i++){ 41 41 items[i].checked=btn.checked; 42 42 } 43 43 } 44 44 btnall.onclick =()=>{ 45 45 for(let i = 0; i< len ; i++){ 46 46 items[i].checked = true; 47 47 btn.checked=items[i].checked; 48 48 } 49 49 } 50 50 btnno.onclick =()=>{ 51 51 for(let i = 0; i< len ; i++){ 52 52 items[i].checked = false; 53 53 btn.checked=items[i].checked; 54 54 } 55 55 } 56 56 btnrev.onclick =()=>{ 57 57 for(let i = 0; i< len ; i++){ 58 58 items[i].checked = !items[i].checked; 59 59 for(let i = 0;i<len;i++){ 60 60 btn.checked=true; 61 61 for(let i = 0; i<len ; i++){ 62 62 if(!items[i].checked){ 63 63 btn.checked=items[i].checked; 64 64 } 65 65 } 66 66 } 67 67 } 68 68 } 69 69 btnsub.onclick =()=>{ 70 70 for(let i = 0; i< len ; i++){ 71 71 if(items[i].checked){ 72 72 alert(items[i].nextSibling.nodeValue); 73 73 } 74 74 } 75 75 } 76 76 } 77 77 </script> 78 78 </body> 79 79 </html>