JS-复选框全选与取消全选
checked：设置或者返回checkbox是否应被选中
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>复选框全选和取消(checked)</title> 10 </head> 11 <body> 12 <script type="text/javascript"> 13 function checkAll(){ 14 //1.获取所有的“爱好” 15 var aihaos=document.getElementsByName("aihao"); 16 //2.所有的爱好作为一个数组形式被遍历 17 //3.选中时，所有爱好都应该被选中 18 /*for(var i=0;i<aihaos.length;i++){ 19 aihaos[i].checked=true; 20 }*/ 21 //4.未选中时全部取消选中 22 var firstCheck=document.getElementById("quanxuan"); 23 if(firstCheck.checked){ 24 for(var i=0;i<aihaos.length;i++){ 25 aihaos[i].checked=true; 26 } 27 }else{ 28 for(var i=0;i<aihaos.length;i++){ 29 aihaos[i].checked=false; 30 } 31 } 32 } 33 function checkOne(){ 34 //所有爱好都选中则全选选中，否则全选未选中 35 //1.获取所有爱好 36 var aihaos=document.getElementsByName("aihao"); 37 var checkCount=0; 38 //2.查看有多少个爱好 aihaos.length==checkCount 39 //3.计数有多少个爱好是选中状态 40 for(var i=0;i<aihaos.length;i++){ 41 if(aihaos[i].checked) checkCount++ 42 } 43 //4.如果选中的爱好等于所有的爱好，则设置全选框为选择状态 44 var firstCheck=document.getElementById("quanxuan"); 45 firstCheck.checked=(aihaos.length==checkCount); 46 47 } 48 49 </script> 50 51 <input type="checkbox" id="quanxuan" value="爱好" onclick="checkAll()"><br><br> 52 <input type="checkbox" name="aihao" value="抽烟" onclick="checkOne()">抽烟<br> 53 <input type="checkbox" name="aihao" value="喝酒" onclick="checkOne()">喝酒<br> 54 <input type="checkbox" name="aihao" value="烫头" onclick="checkOne()">烫头<br> 55 56 </body> 57 </html>
刚开始练习写的不好
