实现全选、不选、反选功能

时间:2021-12-06 09:56:40

html部分

<input id="btn1" type="button" value="全选">
   <input id="btn2" type="button" value="不选">
   <input id="btn3" type="button" value="反选"><br>
   <div id="div1">
       <input type="checkbox"><br>
       <input type="checkbox"><br>
       <input type="checkbox"><br>
       <input type="checkbox"><br>
       <input type="checkbox"><br>
       <input type="checkbox"><br>
       <input type="checkbox"><br>
       <input type="checkbox"><br>
       <input type="checkbox"><br>
       <input type="checkbox"><br>
   </div>

javascript部分

window.onload=function(){
      var bt=document.getElementById("btn1");
      var bt=document.getElementById("btn2");
      var bt=document.getElementById("btn3");
      var odiv=document.getElementById("div1");
      var inp=odiv.getElementsByTagName("input");
<--!全选--> btn1.onclick
=function(){ for(var i=0;i<inp.length;i++){ inp[i].checked=true; } }
<--!不选--> btn2.onclick
=function(){ for(var i=0;i<inp.length;i++){ inp[i].checked=false; } }
<--!反选--> btn3.onclick
=function(){ for(var i=0;i<inp.length;i++){ if(inp[i].checked==true){ inp[i].checked=false; } else{ inp[i].checked=true; } } } }