html 全选或全不选小案例
2016-12-08 20:25 甘雨路 阅读(641) 评论(1) 编辑 收藏 举报<!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" onclick="selectAllOrNo()"/>全选/全不选<br> <input type="checkbox" name="interest" value="足球" onchange="checkSelect()"/>足球 <input type="checkbox" name="interest" value="篮球" onchange="checkSelect()"/>篮球 <input type="checkbox" name="interest" value="羽毛球" onchange="checkSelect()"/>羽毛球 <input type="checkbox" name="interest" value="乒乓球" onchange="checkSelect()"/>乒乓球 <br> <input type="button" value="全选" onclick="selectAll();"/> <input type="button" value="全不选" onclick="noSelect();"/> <input type="button" value="反选" onclick="selectOther();"/> </body> </html>