用javascript实现全选/反选组件

最新推荐文章于 2023-11-07 11:26:54 发布

我的前端学习笔记

最新推荐文章于 2023-11-07 11:26:54 发布

阅读量648

点赞数

分类专栏：技术文章标签： javascript 全选反选

本文链接：https://blog.csdn.net/u012181244/article/details/38781625

版权

技术专栏收录该内容

39 篇文章 0 订阅

订阅专栏

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

效果如图：

在实现的过程中，全选和全部取消选中这两个功能较为简单，只需用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.οnclick=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.οnclick=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].οnclick=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>