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

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. ASP.net AJAX Toolkit —— DynamicPopulateExtender

    <%@ Page Language="C#" AutoEventWireup="true" Title="DynamicPopulate Sam ...

  2. (简单) POJ 3159 Candies,Dijkstra+差分约束。

    Description During the kindergarten days, flymouse was the monitor of his class. Occasionally the he ...

  3. 总结分享十大iOS开发者最喜爱的库

    该10大iOS开发者最喜爱的库由“iOS辅导团队”成员Marcelo Fabri组织投票选举而得,参与者包括开发者团队,iOS辅导团队以及行业嘉宾.每个团队都要根据以下规则选出五个最好的库:1)不能投 ...

  4. android 点滴记录

    1.AndroidM环境下,在framework层添加代码会对jar包的package name进行检查,并提示”unknown package name of class file”怎么解决? 产生 ...

  5. MySQL的MyISAM和InnoDB

    1.概述 MySQL数据库其中一个特性是它的存储引擎是插件式的.用户可以根据应用需要选择存储引擎.Mysql默认支持多种存储引擎,以适用各种不同的应用需要. 默认情况下,创建表不指定表的存储引擎,则新 ...

  6. print打印网页相关

    作者:zccst 1,CSS <link href="/style/print.css" rel="stylesheet" type="text ...

  7. MonkeyRecorder

    http://www.cnblogs.com/lynn-li/p/5894953.html

  8. mongodb学习(一)

    重点是踏出第一步: 1. 各种资料集合,mongodb的介绍,安装,破解...内容大同小异... http://www.cnblogs.com/kuochin/p/3599630.html;http: ...

  9. 一种新的隐藏-显示模式诞生——css3的scale(0)到scale(1)

    .dropdown-menu {  background: rgba(255, 255, 255, 0.98) none repeat scroll 0 0;  box-shadow: 0 1px 2 ...

  10. Python3基础 使用for循环 删除一个列表中的重复项

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...