最近在做一个项目，其中一个功能就是多选框的全选与反选。感觉很简单的小功能，一下子想不起来怎么实现了，很是耽误时间。我在想，我有必要整理下自己的一些小demo了，也方便以后再使用的时候能快速的完成功能。代码加注释很清晰，见代码。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         * {

             padding: 0;

             margin: 0;

         }

         .wrap {

             width: 600px;

             margin: 100px auto 0;

         }

         table {

             border-collapse: collapse;

             border-spacing: 0;

             border: 1px solid #c0c0c0;

         }

         th,

         td {

             border: 1px solid #d0d0d0;

             color: #404060;

             padding: 10px;

         }

         th {

             background-color: #09c;

             font: bold 16px "微软雅黑";

             color: #fff;

         }

         td {

             font: 14px "微软雅黑";

         }

         tbody tr {

             background-color: #f0f0f0;

         }

         tbody tr:hover {

             cursor: pointer;

             background-color: #fafafa;

         }

     </style>

     <script src="jquery.js"></script>

     <script>

         $(function () {

             //1.获取标题栏的checkbox 注册点击事件

             $("#j_cbAll").click(function () {

                 //2.获取标题栏checkbox的状态

                 var isChecked = $(this).prop("checked");

                 //3.设置其他checkbox的状态

                 $("#j_tb input").prop("checked",isChecked);

             });

             //2.获取tbody中的checkbox  注册点击事件

             $("#j_tb input").click(function () {

                 //2.1.获取所有tbody中checkbox的数量

                 var allCount = $("#j_tb input").length;

                 //2.2.获取所有被选中的checkbox的数量

                 var checkedCount = $("#j_tb input:checked").length;

                 //2.3.判断两个数量，如果选中的数量等于所有的数量 就让标题栏的checkbox选中 否则，不选中

                 if(checkedCount < allCount){

                     $("#j_cbAll").prop("checked",false);

                 }else{

                     $("#j_cbAll").prop("checked",true);

                 }

             });

         });

     </script>

 </head>

 <body>

 <div class="wrap">

     <table>

         <thead>

         <tr>

             <th>

                 <input type="checkbox" id="j_cbAll" />

             </th>

             <th>业务平台</th>

             <th>项目名称</th>

             <th>职工编码</th>

             <th>职工名称</th>

             <th>项目名称</th>

         </tr>

         </thead>

         <tbody id="j_tb">

         <tr>

             <td>

                 <input type="checkbox" />

             </td>

             <td>基础平台</td>

             <td>部门管理</td>

             <td>部门管理</td>

             <td>部门管理</td>

             <td>部门管理</td>

         </tr>

         <tr>

             <td>

                 <input type="checkbox" />

             </td>

             <td>固定资产</td>

             <td>部门管理</td>

             <td>部门管理</td>

             <td>部门管理</td>

             <td>部门管理</td>

         </tr>

         <tr>

             <td>

                 <input type="checkbox" />

             </td>

             <td>运维管理</td>

             <td>部门管理</td>

             <td>部门管理</td>

             <td>部门管理</td>

             <td>部门管理</td>

         </tr>

         <tr>

             <td>

                 <input type="checkbox" />

             </td>

             <td>售后服务</td>

             <td>人员管理</td>

             <td>人员管理</td>

             <td>人员管理</td>

             <td>人员管理</td>

         </tr>

         </tbody>

     </table>

 </div>

 </body>

 </html>

checkbox的全选与反选的更多相关文章

  1. jQuery checkbox的全选与反选

    1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...

  2. 通过VBA实现checkbox的全选和反选

    checkbox的全选和反选可以通过VBA来控制,这种设计常见于一些交互式报表,代码如下: 1.分成两个IF判断 Private Sub CheckBox1_Click()  ‘checkbox为总控 ...

  3. jquery中checkbox的全选与反选

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

  4. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

  5. checkbox之全选和反选

    先导入jquery组件 <input type="checkbox" id="checkall">全选<input type="ch ...

  6. Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...

  7. Exameple014实现html中checkbox的全选，反选和全不选（1）

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

  8. js中checkbox的全选和反选的实现

    <head> <meta charset="utf-8"/> <script type="text/javascript"> ...

  9. 用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容

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

随机推荐

  1. js继承方式

    1.原型链 实现的本质是重写原型对象,代之以一个新类型的实例: 给原型添加方法的代码硬顶放在替换原型的语句之后: 不能使用对象字面量查收能见原型方法,这样会重写原型链. 缺点:包含引用类型值的原型属性 ...

  2. ssl + nginx + tomcat 部署方案

    安装make yum -y install gcc automake autoconf libtool make 安装g++ yum install gcc gcc-c++ 安装PCRE cd /us ...

  3. Hbase入门教程--单节点伪分布式模式的安装与使用

    Hbase入门简介 HBase是一个分布式的.面向列的开源数据库,该技术来源于 FayChang 所撰写的Google论文"Bigtable:一个结构化数据的分布式存储系统".就像 ...

  4. SCVMM中Clone虚拟机失败显示Unsupported Cluster Configuration状态

    在SCVMM进行虚拟机的Clone,虽然失败了,但是Clone出虚拟机却显示在SCVMM控制台的虚拟机的列表中,并且状态是Unsupported Cluster Configuration.无法修复, ...

  5. [笔记]过期的UBUNTU怎么更新软件包

    使用old-releases仓库替换main/security仓库,就像下面这样. sudo sed -i -r 's/([a-z]{2}\.)?archive.ubuntu.com/old-rele ...

  6. ERROR: Unable to globalize '/usr/local/NONE/etc/php-fpm.d/*.conf' 问题的解决

    今天继续作大死,趟php7的配置的坑. 照例,安装了昨天的各种扩展之后,解压php7的压缩文件到 /usr/local/. 然后开始配置config的扩展: ./configure --prefix= ...

  7. Linux paste命令

    Linux paste命令用于合并文件的列. paste指令会把每个文件以列对列的方式,一列列地加以合并. 语法 paste [-s][-d <间隔字符>][--help][--versi ...

  8. Tensorflow 官方版教程中文版

    2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,同日,极客学院组织在线TensorFlow中文文档翻译.一个月后,30章文档全部翻译校对完成,上线并提供电子书下载,该 ...

  9. MVC中部分视图调用方法总结

    部分视图不走  controller @Html.Partial(“_Menu”);  //这种是不走Controller的,直接在加载_Menu的视图 @Html.Partial(“_Menu”, ...

  10. LK产品如何提高通信速率

    之前做LK,由于采用自定义协议,485通信.为了避免通信撞车,采用主控轮询.从机应答的通信方式. 当设备规模扩大,需要轮询的子设备和参数变多时,轮询周期就会加长,人机交互时,系统反应缓慢. 分析主控轮 ...