有如下案例,使用JavaScript实现全选(全不选)按钮。
这个按钮在实际开发中也是很常用的,源码附上
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多选框练习</title> </head> <body> <input type="checkbox" id="n2" onclick="set();"/>全选/全不选<br/><hr/> <input type="checkbox" name="nn" />羽毛球<br/> <input type="checkbox" name="nn" />蓝球<br/> <input type="checkbox" name="nn" />橄榄球<br/> <input type="checkbox" name="nn" />乒乓球<br/> <input type="checkbox" name="nn" />足球<br/> <input type="checkbox" name="nn" />棒球<br/><hr/> <input type="button" value="全选" onclick="setAll();" /> <input type="button" value="全不选" onclick="setNone();" /> <input type="button" value="反选" onclick="setBack();" /> <script type="text/javascript"> function setAll() { var a=document.getElementsByName("nn");//先获取input多选框 //获取的a是个数组,遍历这个数组,设置checked属性 for(var i=0;i<a.length;i++){ a[i].checked=true;//checked为true时是选中,false时是未选中 } } function setNone() { var a=document.getElementsByName("nn"); for(var i=0;i<a.length;i++){ a[i].checked=false; } } function setBack() { var c=document.getElementsByName("nn"); for(var i=0;i<c.length;i++){ if(c[i].checked==true){ c[i].checked=false; } else{ c[i].checked=true; } } } function set() { var d=document.getElementById("n2"); if(d.checked==true){ setAll();//直接调用已有的方法,设置checked属性 } else{ setNone(); } } </script> </body> </html>