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

效果如图：

在实现的过程中，全选和全部取消选中这两个功能较为简单，只需用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. 逆转序列的递归/尾递归（+destructuring assignment）实现（JavaScript + ES6）

    这里是用 JavaScript 做的逆转序列(数组/字符串)的递归/尾递归实现.另外还尝鲜用了一下 ES6 的destructuring assignment + spread operator 做了 ...

  2. Python 中的进程、线程、协程、同步、异步、回调

    进程和线程究竟是什么东西?传统网络服务模型是如何工作的?协程和线程的关系和区别有哪些?IO过程在什么时间发生? 一.上下文切换技术 简述 在进一步之前,让我们先回顾一下各种上下文切换技术. 不过首先说 ...

  3. 十、EnterpriseFrameWork框架的分层架构及意义（控制器、业务对象、实体、Dao之间关系）

    本章内容主要包括两个方面,一.是框架分层(控制器.业务对象.实体.Dao)的详细说明,二.是对比常用三层结构的区别和优势: 本文要点: 1.框架中的各个分层详细说明 2.对比常用三层结构的区别和优势 ...

  4. eclipse-java/spring mvc常见错误

    Dynamic Web Module 3.1 requires Java 1.7 or newer http://crunchify.com/how-to-solve-dynamic-web-modu ...

  5. 优化LibreOffice如此简单

    对于开源软件的支持者和粉丝来说,LibreOffice 无疑是 Microsoft Office 的最佳替代品,而且它已在过去的许多版本迭代中迎来了许多巨大改进.然而,通过用户的手动配置,我们还是有办 ...

  6. MPU9250调试

    MPU9250 芯片概述 MPU9250芯片是一个9轴姿态传感芯片,其中包含了3轴加速度传感器.3轴角速度传感器以及三轴磁力计. 其本质上是MPU6050芯片+AK8963. 可以获取传感芯片的加速度 ...

  7. solrcloud使用中遇到的问题及解决方式

    首先声明,我们团队在使用solrcloud过程中踩了一些坑,同事(晓磊和首富)进行了总结,我列到我的博客上做记录用: Q:为什么Solr里面的时间比数据库里面早8小时? Solr默认采用的时区是UTC ...

  8. Android学习笔记之横向二级菜单实现

    PS:元旦来一发. 学习内容: 1.Android二级横向菜单的实现过程.效果如上图...   这种横向的二级菜单在很多的app都有所应用.效果看起来还是非常的美观的.也算是项目需要,自己也就学了一下 ...

  9. Javascript之旅（一）

    Javascript之旅(一) 一.基础知识 基本语法 变量 数据类型 字符串 数组 对象 条件判断 循环 Map和Set iterable 为什么要学习JavaScript JavaScript 是 ...

  10. CheckListBox的实现方式分析

    实际项目中常常要实现有CheckBox列表框.但是WPF没有自带这样的一个控件,下面就用Style来实现这样的功能.而对于CheckBox列表框,又常常会有一个Select All的CheckBox来 ...