用javascript實現全選/反選元件

勤勞的插秧哥發表於2014-08-23
JavaScript元件

以下是本人制作的全選/反選 元件，供廣大同行參考、指正：

效果如圖：



在實現的過程中，全選和全部取消選中這兩個功能較為簡單，只需用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>


相關文章