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

效果如图：

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

用javascript实现全选/反选组件的更多相关文章

  1. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  3. JavaScript、全选反选-课堂笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 用JavaScript实现全选-反选

    实现全选-反选 在日常生活我们会遇到需要全选-反选的地方,其实用JavaScript也能实现. 样式如下所示: 样式代码如下所示: <!DOCTYPE html PUBLIC "-// ...

  5. JavaScript下全选反选的Demo程序里实现checkmeonly函数 DOM

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Android开发 ---基本UI组件5：监听下拉选项，动态绑定下拉选项、全选/反选，取多选按钮的值，长按事件，长按删除，适配器的使用，提示查询数据，activity控制多按钮

    效果图: 效果描述: 1.当点击 1 按钮后,进入选择城市的页面,会监听到你选中的城市名称:动态为Spinner绑定数据 2.当点击 2 按钮后,进入自动查询数据页面,只要输入首字母,就会动态查找以该 ...

  7. javascript总结41:表格全选反选,经典案例详解

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

  9. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 三种ViewController跳转的异同

    - (void)presentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag comple ...

  2. LintCode-- Remove Linked List Elements

    Remove all elements from a linked list of integers that have valueval. 样例 Given 1->2->3->3- ...

  3. 设计模式——"simple Factory"

    顾名思义,工厂模式就是类似于生活中的工厂,可以生产我们想要的东西,回到代码,假如我们需要一个实例,直接从工厂中拿即可. eg:假如我们定义一个“球”类的接口 public interface Ball ...

  4. 利用Cydia Substrate进行Android HOOK（二）

    在前面关于Substrate的介绍中我们已经讲了用Substrate hook java代码,现在我们讲下怎么用它hook native代码.hook native代码我们需要编写Substrate ...

  5. ruby -- 进阶学习（六） devise修改邮件发送者邮箱

    在config/environment.rb/development.rb或者config/environment/production.rb中, 简单示范例子: Text03::Applicatio ...

  6. Membership三步曲

    http://www.cnblogs.com/jesse2013/p/membership-part1.html http://www.cnblogs.com/jesse2013/p/membersh ...

  7. SQL Server 2008 各种DateTime的取值范围

    SQL Server 2008除了DateTime和SmallDateTime之外,又新增了四种时间类型,分别为:date,time,datetime2和datetimeoffset. 各时间类型范围 ...

  8. iOS-开发技巧-页面布局

    #pragma mark - Life Cycle//1.初始化//2.view did load//3.view will appear…#pragma mark - System Delegate ...

  9. 如何根据iframe内嵌页面调整iframe高宽续篇

    接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说,按照文章中说的第二种方法实现代码如下: 实现 A.com/detail/view 页面的iframe代码如下: <ifra ...

  10. 关于开发Windows服务程序容易搞混的地方！

    在开发Windows服务程序时,我们一般需要添加安装程序,即:serviceInstaller,里面有几个关于名称属性,你都搞明白了吗? 1.Description:表示服务说明(描述服务是干什么的) ...