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

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. C# DateTime变量不能赋null值

    使用定时器的时候: DateTime aimtime=DateTime.Now.AddSeconds(1); CheckTimer() { if(DateTime.Now.CompareTo(aimt ...

  2. [即时通讯]openfire启动失败解决办法

    当你发现你的电脑上的openfire无论你是重新安装还是重启都无法启动的情况下你可以按照我下面写的那些终端指令来启动你的openfire不用再去重新做你的系统了. 一般你发现你的openfire打开出 ...

  3. MAP--复杂map结构的构造

    我的关键结构比如 struct{     int a;     int b;     int c; }s: 因为这三个数据是基本信息,可以唯一区别一个设备.拿这样一个数据结构作为索引就能找到每个设备. ...

  4. Activiti----hellowWorld(使用H2数据库)

    1.项目结构 2.pom <dependencies> <dependency> <groupId>junit</groupId> <artifa ...

  5. UVA 10689 Yet another Number Sequence

    简单矩阵快速幂. if(m==1) MOD=10; if(m==2) MOD=100; if(m==3) MOD=1000; if(m==4) MOD=10000; 剩下的就是矩阵快速幂求斐波那契数列 ...

  6. iOS给model排序

    今天有朋友问我怎么给Model排序,我顺便写了一个例子, 以下是代码,很简洁可以直接用. Person *per = [[Person alloc] init]; per.name = @" ...

  7. Online Schema Change for MySQL

    It is great to be able to build small utilities on top of an excellent RDBMS. Thank you MySQL. This ...

  8. Android之布局大全

    Android布局方式可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类.其它的一些布局都扩展自这5个类. 上结构图: 转自:http://www.cnblogs.com/de ...

  9. SD卡初始化以及命令详解

    SD卡是嵌入式设备中很常用的一种存储设备,体积小,容量大,通讯简单,电路简单所以受到很多设备厂商的欢迎,主要用来记录设备运行过程中的各种信息,以及程序的各种配置信息,很是方便,有这样几点是需要知道的 ...

  10. Selenium2(java)启动常用浏览器 三

    默认启动firefox浏览器 Webdriver driver = new FirefoxDriver(); 启动谷歌浏览器 配置chromedriver WebDriver driver; Syst ...