<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>lf</title> <script type="text/javascript"> function selectAllOrNo(){ var choice = document.getElementById("choose"); //根据对应的状态全选或全不选 if(choice.checked==true){ selectAll(); }else{ noSelect(); } } function selectAll(){ var choice = document.getElementById("choose"); choice.checked=true; //获取interest的复选框 var interests = document.getElementsByName("interest"); // 遍历 for(var i = 0; i<interests.length;i++){ var interest = interests[i]; interest.checked = true; } } function noSelect(){ var choice = document.getElementById("choose"); choice.checked=false; //获取interest的复选框 var interests = document.getElementsByName("interest"); // 遍历 for(var i = 0; i<interests.length;i++){ var interest = interests[i]; interest.checked = false; } } function selectOther(){ var choice = document.getElementById("choose"); choice.checked=true; //获取interest的复选框 var interests = document.getElementsByName("interest"); // 遍历 for(var i = 0; i<interests.length;i++){ var interest = interests[i]; interest.checked = !interest.checked; // 如果存在未选择,则设置全选/全不选为不选择状态 checkSelect(); } } // 如果存在未选择,则设置全选/全不选为不选择状态 function checkSelect(){ var choice = document.getElementById("choose"); choice.checked=true; //获取interest的复选框 var interests = document.getElementsByName("interest"); // 遍历 for(var i = 0; i<interests.length;i++){ var interest = interests[i]; // 如果存在未选择,则设置全选/全不选为不选择状态 if(interest.checked==false){ choice.checked=false; } } } </script> </head> <body> 你爱好的运动是? <input type="checkbox" id="choose" οnclick="selectAllOrNo()"/>全选/全不选<br> <input type="checkbox" name="interest" value="足球" οnchange="checkSelect()"/>足球 <input type="checkbox" name="interest" value="篮球" οnchange="checkSelect()"/>篮球 <input type="checkbox" name="interest" value="羽毛球" οnchange="checkSelect()"/>羽毛球 <input type="checkbox" name="interest" value="乒乓球" οnchange="checkSelect()"/>乒乓球 <br> <input type="button" value="全选" οnclick="selectAll();"/> <input type="button" value="全不选" οnclick="noSelect();"/> <input type="button" value="反选" οnclick="selectOther();"/> </body> </html>