美文网首页
全选、不选、反选的效果

全选、不选、反选的效果

作者: C_Y大渔 | 来源:发表于2017-01-10 10:12 被阅读0次

    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/>

    相关文章

      网友评论

          本文标题:全选、不选、反选的效果

          本文链接:https://www.haomeiwen.com/subject/dhdkbttx.html