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

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. CDN概念+作用+特点+原理

    CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘" ...

  2. 产品需求文档写作方法(三)用例文档(UML用例图、流程图)

    在产品和技术领域里都有UML的技能知识,而对于产品人员的UML则更多的是指用例图,也就是我所称呼的用户流程图.在讲PRD文档写作的第二篇文章里,我提到了用户流程图的制作,实际上用户流程图是我在产品规则 ...

  3. 【POJ2104】【HDU2665】K-th Number 主席树

    [POJ2104][HDU2665]K-th Number Description You are working for Macrohard company in data structures d ...

  4. 利用反射动态从程序集dll执行方法和属性

    程序结构: //获取程序集 Assembly asb = Assembly.LoadFrom(path);//path为程序集的物理路径 //获取程序集下面的Student类 Type documen ...

  5. 一个苹果证书怎么多次使用——导出p12文件

    http://blog.csdn.net/jjiss318/article/details/41812243 原文:http://my.oschina.net/u/1245365/blog/19636 ...

  6. FZU 2110 Star

    简单暴力题,读入%lld会WA,%I64d能过. #include<cstdio> #include<cstring> #include<cmath> #inclu ...

  7. Tsinsen-A1490 osu! 【数学期望】

    问题描述 osu!是一个基于<押忍!战斗!应援团><精英节拍特工><太鼓达人>等各种音乐游戏做成的一款独特的PC版音乐游戏.游戏中,玩家需要根据音乐的节奏,通过鼠标 ...

  8. 《Web接口开发与自动化测试 -- 基于Python语言》 ---前言

    前    言 本书的原型是我整理一份Django学习文档,从事软件测试工作的这六.七年来,一直有整理学习资料的习惯,这种学习理解再输出的方式对我非常受用,博客和文档是我主要的输出形式,这些输出同时也帮 ...

  9. SQLite用法

    SQLite语法:http://blog.csdn.net/ejzhang/article/details/6224915#08 SQLite查询优化:1.http://www.eoeandroid. ...

  10. 使用spol导出exce

    sqlplus 能生产xls的excel文件 connect / as sysdba; SET NEWPAGE 0 SET SPACE 0 SET LINESIZE 80 SET PAGESIZE 0 ...