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

效果如图：

在实现的过程中，全选和全部取消选中这两个功能较为简单，只需用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. jquery自定义类似$.ajax()的方法

    热腾腾的代码: <script type="text/javascript"> $.extend({ testgogo: function (options) { va ...

  2. Qt编写自定义控件一开关按钮

    从2010年进入互联网+智能手机时代以来,各种各样的APP大行其道,手机上面的APP有很多流行的元素,开关按钮个人非常喜欢,手机QQ.360卫士.金山毒霸等,都有很多开关控制一些操作,在Qt widg ...

  3. osgi: HttpService A null service reference is not allowed.

    最近在学习osgi,在练习HttpService的过程中,一直出现“A null service reference is not allowed”这样的报错,代码本身没有问题,在网上也搜了不少地方, ...

  4. c++ 模板元编程的一点体会

    趁着国庆长假快速翻了一遍传说中的.大名鼎鼎的 modern c++ design,钛合金狗眼顿时不保,已深深被其中各种模板奇技淫巧伤了身...论语言方面的深度,我看过的 c++ 书里大概只有 insi ...

  5. css3 画圆记录

    <style> .radar-wrapper * { -moz-box-sizing: border-box; box-sizing: border-box; margin:; paddi ...

  6. 七牛portal可用性测试记

    引言:2013年年底应七牛公司朋友的邀请,给他们的Portal进行可用性测试.七牛(http://www.qiniu.com/)一直专注于云存储基础服务,在业内颇有声誉.七牛云存储的后台选用并不常用的 ...

  7. js中加密及设置cookie

    1.设置cookie及有效期时长 //cname:cookie的名称,cvalue:cookie的内容,exdays:cookie有效期时长: function setCookie(cname, cv ...

  8. Java异常(一) Java异常简介及其架构

    概要 本章对Java中的异常进行介绍.内容包括:Java异常简介Java异常框架 转载请注明出处:http://www.cnblogs.com/skywang12345/p/3544168.html ...

  9. STM32L051 PVD的调试

    我的PVD的驱动以及例程位于STM32L0xx_Drivers这个库当中,在使用前最好先阅读readme.md文件 PVD 是一种检测MCU供电情况的技术.当供电电压高于或者低于一定阈值的时候,可以在 ...

  10. WEB 安全之 SQL注入 < 三 > 提权

    SQL注入是一个比较“古老”的话题,虽然现在存在这种漏洞的站点比较少了,我们还是有必要了解一下它的危害,及其常用的手段,知己知彼方能百战不殆.进攻与防守相当于矛和盾的关系,我们如果能清楚了解 攻击的全 ...