用javascript实现全选/反选组件

来源：互联网发布：下载定时开关机软件编辑：程序博客网时间：2024/06/03 16:07

以下是本人制作的全选/反选组件，供广大同行参考、指正：

效果如图：

在实现的过程中，全选和全部取消选中这两个功能较为简单，只需用for循环遍历所有复选框为true或false即可。反选也较为简单，也是用for循环遍历一遍，把复选框的值设为当前状态的反向： obox[i].checked=!obox[i].checked; 。难点在于在全选状态下取消一个复选框，要自动识别为没有全选，随即更新全选状态为false。

<html><head>  <meta charset="utf-8">  <style>  body,div{margin: 0;padding: 0}  body{font: 16px/1.5 Tahoma;color: #fff;font-weight:bold;text-align: center;line-height: 28px}  #box{margin-top:100px;}  #box1{height: 320;width: 100px;margin: 0 auto;background: #9c3;border:4px solid #439C3A;border-radius: 6px;}   #box2{width: 100px;height: 300px；margin: 0 auto;}  .checkbox{width: 16px;height: 16px;}  label{font: 20px/1.5 Tahoma;font-weight: bold;line-height: 28px}  #all{width: 20px;height: 20px;}  button{background: #9c3;color: #fff;height: 28px;width: 60px;font:18px/1.5 Tahoma;line-height: 15px;border: 2px solid #439C3A;     border-radius: 4px;font-weight:bold;cursor: pointer;}  </style>  </head>  <body>    <div id="box">     <div id="box1">      <label><b>全选</b></label><input type="checkbox" id="all"><br><hr>      <div id="box2">      事项1<input type="checkbox" class="checkbox"><br>      事项2<input type="checkbox" class="checkbox"><br>      事项3<input type="checkbox" class="checkbox"><br>      事项4<input type="checkbox" class="checkbox"><br>      事项5<input type="checkbox" class="checkbox"><br>      事项6<input type="checkbox" class="checkbox"><br>      事项7<input type="checkbox" class="checkbox"><br>      事项8<input type="checkbox" class="checkbox"><br>      <hr>           <button id="but1">反 选</button>           </div>    </div>  </div>  </body>    <script type="text/javascript">    var oall=document.getElementById("all");     //获取“全选/取消”复选框    var obox=document.getElementById("box2").getElementsByTagName("input");     //获取各项复选框    var olabel=document.getElementsByTagName("label")[0];     //获取“label”用来更新显示 全选/取消    var obut=document.getElementById("but1");     //获取反选按钮<span style="font-family: Arial, Helvetica, sans-serif;">  </span>

    obut.onclick=function()               //反选    {      var count=0;      for(var i=0;i<obox.length;i++)      {                 obox[i].checked=!obox[i].checked;              if(obox[i].checked)              {                count++;              }      }      oall.checked=count==obox.length?true:false;      olabel.innerHTML=oall.checked ? "取消":"全选";            };

</pre><pre name="code" class="html">

     oall.onclick=function(){                //全选        for(var i=0;i<obox.length;i++){          obox[i].checked=this.checked;          }        olabel.innerHTML=oall.checked ? "取消":"全选";               };

</pre><pre name="code" class="html">

        var n;       for(var i=0;i<obox.length;i++)    //更新“全选/取消”       {        obox[i].onclick=function(){                 n=0;          for(var j=0;j<obox.length;j++)          {            if(obox[j].checked)            {              n++;            }                     }          oall.checked=n==obox.length?true:false;          olabel.innerHTML=oall.checked ? "取消":"全选";                  };      }  </script></html>

0 0