全选、不选、反选的效果

2017-01-10  本文已影响0人  C_Y大渔

1、js部分(checked属性)

window.onload=function(){

        var oBtn1=document.getElementById('btn1');

        var oBtn2=document.getElementById('btn2');

        var oBtn3=document.getElementById('btn3');

        var oBox=document.getElementById('box');

        var aCheck=oBox.getElementsByTagName('input');

        oBtn1.onclick=function(){

              for(var i=0;i<aCheck.length;i++){ aCheck[i].checked=true;  }

      };

      oBtn2.onclick=function(){

             for(var i=0; i<aCheck.length;i++){   aCheck[i].checked=false;  }

      };

      oBtn3.onclick=function(){

            for(var i=0; i<aCheck.length;i++){

                  if(aCheck[i].checked==false){   aCheck[i].checked=true;

                 }else{  aCheck[i].checked=false; }

           }

     };

};

1、html部分

<input type="button" value="全选" id="btn1" />

<inpu ttype="button" value="不选" id="btn2" />

<input type="button" value="反选" id="btn3" />

<div id="box">

     <input type="checkbox" />

    <input type="checkbox" />

    <input type="checkbox" />

<div/>

上一篇下一篇

猜你喜欢

热点阅读