最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下。有问题的话,还望各路大神指导一二。

html代码如下:

<fieldset data-role="controlgroup">  
  <label><input type="checkbox" name="boxes" id="select_all" onclick="selectAll();" >全选</label>
  <label><input type="checkbox" name="box" onclick="select();" >子选项1</label>
  <label><input type="checkbox" name="box" onclick="select();" >子选项2</label>
</fieldset> 

jquery代码如下:

function selectAll(){
if ($("#select_all").prop("checked")) {
$("input[name='box']").prop("checked", true).checkboxradio("refresh");
} else {
$("input[name='box']").prop("checked", false).checkboxradio("refresh");
}
}
/*如果子项全被选中或者某一个子项被取消,全选项相应的勾选或者全选相应取消勾选*/
function select(){
      if ($("#select_all").prop("checked")){
          $("input[name='box']").each(function(){
                   if(this.checked == false)
                   {
                           $("input[name='boxes']").prop("checked", false).checkboxradio("refresh");
                   }
           });
      }
      else{
          var n = 0;
          $("input[name='box']").each(function(){
                   if(this.checked == false){
                       n++;
                   }
           });    
           if(!n){
               $("input[name='boxes']").prop("checked", true).checkboxradio("refresh");
           }
      }
 
}

jQuery --checkbox全选和取消全选简洁高效的解决办法的更多相关文章

  1. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  2. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

  3. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  4. datagridview里面的checkbox全选和取消全选

    全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...

  5. jquery购物车全选,取消全选,计算总金额

    这是html代码 <div class="gwcxqbj"> <div class="gwcxd center"> <div cl ...

  6. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  7. react实现全选、取消全选和个别选择

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

  8. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

  9. JS实现表单全选以及取消全选实例

    实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...

随机推荐

  1. Tengine TCP 负载均衡

    tar jxvf jemalloc-3.5.1.tar.bz2 cd jemalloc-3.5.1 ./configure make && make install echo '/us ...

  2. 跳舞链 Dancing Links

    作为搜索里面的一个大头,终于刷了一部分题目了,跳舞链一般都有现成的模板来套...... 至于跳舞链的学习的话,我觉得http://www.cnblogs.com/grenet/p/3163550.ht ...

  3. SpringMVC和mybatis的框架

    1.首先以一个项目做例子,该项目用到的框架即为SpringMVC+mybatis,项目环境为MyEclipse+sqlserver+tomcat6,项目的地址(项目+数据库备份文件)大家可以上我的百度 ...

  4. 位图文件(BMP)格式以及Linux下C程序实现(转)

    源:位图文件(BMP)格式以及Linux下C程序实现 说到图片,位图(Bitmap)当然是最简单的,它是Windows显示图片的基本格式,其文件扩展名为*.BMP.由于没有经过任何的压缩,故BMP图 ...

  5. Phone APP设计规范/iPad APP设计规范/Android APP设计规范/网页设计规范

    原文链接:http://www.ui001.com/chicun/ ①iPhone的设计尺寸 iPhone界面尺寸: 设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度 iPhone6 plu ...

  6. Redis的启动

    http://www.cnblogs.com/goodspeed/archive/2012/10/18/2729615.html http://blog.csdn.net/yulei_qq/artic ...

  7. Intel X710网卡VxLAN offload 性能测试

    Intel X710网卡VxLAN offload性能测试 1.  测试环境参数: 交换机:盛科E580 服务器: Intel(R) Xeon(R) CPU E5-2650 v3 @ 2.30GHz ...

  8. lower_bound和upper_bound算法实现

    lower_bound算法要求在已经按照非递减顺序排序的数组中找到第一个大于等于给定值key的那个数,其基本实现原理是二分查找,如下所示: int lower_bound(vector<int& ...

  9. 2786: [JSOI]Word Query电子字典

    2786: [JSOI]Word Query电子字典 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 3  Solved: 3[Submit][Statu ...

  10. Delphi基本图像处理方法汇总

    这篇文章主要介绍了Delphi基本图像处理方法,实例汇总了Delphi操作图像实现浮雕.反色.模糊.翻转等常用效果的方法,非常具有实用价值,需要的朋友可以参考下   本文实例汇总了Delphi基本图像 ...