叨叨游戏网
您的当前位置:首页实现js中复选框的多选与反选

实现js中复选框的多选与反选

来源:叨叨游戏网


<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script>

 window.onload = function(){
 selAll = document.getElementById("selAll");
 hobbys = document.getElementsByName("hobby");
 fx = document.getElementById("fx"); //全选事件
 selAll.onclick = function(){
 //全选
 if(selAll.checked == true){ 
 for (var i=0;i<hobbys.length;i++) {
 hobbys[i].checked = true;
 }
 }else{ 
 for (var i=0;i<hobbys.length;i++) {
 hobbys[i].checked = false;
 }
 }
 } //反选
 fx.onclick = function(){

 for (var i=0;i<hobbys.length;i++) { var b = hobbys[i]; if(b.checked == true){
 b.checked = false;
 }else{
 b.checked = true;
 }
 }
 }

 } </script>
 </head>
 <body>
 <input type="checkbox" name="" id="selAll" />全选 
 <button id="fx">反选</button>
 <br>
 <input type="checkbox" name="hobby" />篮球 
 <input type="checkbox" name="hobby" />足球 <input type="checkbox" name="hobby" />乒乓球 <input type="checkbox" name="hobby" />羽毛球 </body></html>
显示全文