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

效果如图：

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

    好久没更新博客了,感觉在博客园这种技术为主的博客里面写太多东西写得太杂了,平时的阅读体验非常糟糕,我一直都是一个喜欢记录的人,以前经常有在笔记本上写日记的习惯,但是自从用了网上博客之后,好像就再也没有 ...

  2. （转）2G到C-RAN网络架构的演进

    这是我一个学霸师弟写的一篇知识普及的文章,涉及到的知识结构很全面,很丰富,对网络通信技术感兴趣的童鞋可以看看,内容我就不贴过来了,直接到他博客上去看吧. 2G到C-RAN网络结构演进

  3. 明天去FDUSC报道了，GOD BLESS ALL OF US

    @lrb @tellmewtf @proverbs

  4. 十一、EnterpriseFrameWork框架的分层与系统业务的结合

    上章详细讲了EnterpriseFrameWork框架中的每个分层,这都是从技术层面来说明,也就是我们知道怎么来建一个控制器或一个业务对象,但开发过程中应该建一个什么样的控制器或业务对象了?本章的主要 ...

  5. Windows Azure Compute Emulator无法启动问题解决方案

    Visual Studio 2013安装了Windows Azure SDK 2.7,但启动Emulator调试时,出现如下错误: Error: The installed Windows Azure ...

  6. Struts2知多少（2） Struts2 是什么

    Struts2是流行和成熟的基于MVC设计模式的Web应用程序框架. Struts2不只是Struts1下一个版本,它是一个完全重写的Struts架构. WebWork框架开始以Struts框架为基础 ...

  7. Windows上使用clang编译

    - 先自己从源代码 (http://llvm.org/releases/) 编译llvm和clang,或者直接安装clang for Windows - 测试过使用cygwin (https://cy ...

  8. java中图片文件的传输及显示（Socket以及ServerSocket演示）

    //客户端部分 package testSix; import java.awt.Graphics; import java.io.IOException; import java.io.InputS ...

  9. Hadoop入门进阶课程5--MapReduce原理及操作

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  10. Python单元测试框架之pytest -- 生成测试报告

    继续pytest单元测试框架的学习,pytest可以生成多种类型的测试报告.这一节就来学习pytest如何生成测试报告. 创建test_calss.py 测试用例文件,这里以测试该文件为例. #cod ...