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

效果如图：

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

    http://download.csdn.net/album/detail/1397/2

  2. char str[]和char *str的区别

    1.http://blog.csdn.net/szchtx/article/details/10396149 char ss[]="C++";  ss[0]='c';        ...

  3. 【转】每个人应该知道的NVelocity用法

    NVelocity是一个基于.NET的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由.NET代码定义的对象.从而使得界面设 ...

  4. 类或方法名后加<>

    声明类型为泛型. 说明传递的参数为泛型,而不仅仅是一种类型. public void aa<T>(T a) { Console.WriteLine(a); } 调用时可写: this.aa ...

  5. 使用Python画ROC曲线以及AUC值

    from:http://kubicode.me/2016/09/19/Machine%20Learning/AUC-Calculation-by-Python/ AUC介绍 AUC(Area Unde ...

  6. 我所研究过的 ASP.NET MVC 或者 .NET 或者 ORM 或者框架的开源项目

    ASP.NET MVC 的开源项目有很多,这里列出我所研究过的: SocialGoal v1.0.0 prodinner nopCommerce SmartStore.NET 由于今天才做收集工作,可 ...

  7. 爬虫技术 -- 进阶学习（七）简单爬虫抓取示例（附c#代码）

    这是我的第一个爬虫代码...算是一份测试版的代码.大牛大神别喷... 通过给定一个初始的地址startPiont然后对网页进行捕捉,然后通过正则表达式对网址进行匹配. List<string&g ...

  8. AutoMapper用法一瞥

    前段时候做个小项目用到了autoMapper(参考了NOP里的用法),感觉还行,用起来挺方便的.首先复杂的东西我就不说了,至于详细的教程我也就不写了,比较园子里有很多这样的文章,我就分享下,在项目中实 ...

  9. 受限玻尔兹曼机（RBM）学习笔记（二）网络结构

      去年 6 月份写的博文<Yusuke Sugomori 的 C 语言 Deep Learning 程序解读>是囫囵吞枣地读完一个关于 DBN 算法的开源代码后的笔记,当时对其中涉及的算 ...

  10. DomFlags - 给 DOM 添加书签，方便调试

    DomFlags 所以一款 Chrome 浏览器扩展程序提,供了一种新的方式与浏览器开发者工具互动.DomFlags 让你可以给 DOM 元素创建快捷键,就像用于导航 DOM 树的书签.它们可以帮助您 ...