javascript的表单复选框
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 "use strict"; 10 window.onload = function() { 11 let allChkElt = document.getElementById("allChk"); 12 let aihaos = document.getElementsByName("aihao"); 13 allChkElt.onclick = function() { 14 for (let i = 0; i < aihaos.length; i++) { 15 aihaos[i].checked = allChkElt.checked; 16 } 17 } 18 19 for (let i = 0; i < aihaos.length; i++) { 20 aihaos[i].onclick = function() { 21 let count = 0; 22 for (let j = 0; j < aihaos.length; j++) { 23 // console.log(aihaos[j].checked); 24 if (aihaos[j].checked) { 25 console.log(count); 26 count++; 27 } 28 } 29 if (count === aihaos.length) { 30 allChkElt.checked = true; 31 } else { 32 allChkElt.checked = false; 33 } 34 } 35 } 36 } 37 </script> 38 <form action="service/form_action" method="get" name="level-form" id="form"> 39 <input type="checkbox" name="" id="allChk">全选     40 <input type="checkbox" name="aihao" id="" value="smoke">抽烟   41 <input type="checkbox" name="aihao" id="" value="drink">喝酒   42 <input type="checkbox" name="aihao" id="" value="tt">烫头   43 44 </form> 45 </body> 46 </html>