jquery复选框全选/取消示例


Posted in Javascript onDecember 30, 2013

功能:

a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态

b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中

/**
 * 全选函数
 * @param mainId 主复选框id
 * @param klass 下属复选框的class
 */
function selectAll(mainId,klass){
 $("." + klass).each(function(){
     if($("#" + mainId).attr("checked")== "checked"){
      $(this).attr("checked", "checked");
     }
     else{
      $(this).removeAttr("checked");
     }
 });
}

以上实现全选及全部取消 所有子复选框,至于数据的实现则在控制器里接收到复选框的数组即可

/**
 * 子复选框有一个选中 父复选框就选中 <br>子复选框全不选 父复选框不选中
 * @param father 父复选框的id
 * @param son 子复选框的class
 */
function checkSonCheckBox(father,son){
 $("."+son).click(function(){
  if($(this).attr("checked")== "checked"){
   $(this).addClass("checked");
  }else{
   $(this).removeClass("checked");
  }
  if($("."+son).hasClass("checked")){
   $("#"+father).attr("checked","checked");
//   console.log("至少有一个子复选框选中!");
  }else{
   $("#"+father).removeAttr("checked");
//   console.log("所有子复选框都未选中!");
  }
 });
};

以上实现 一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中

Javascript 相关文章推荐
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
Angularjs的启动过程分析
Jul 18 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
vue2路由基本用法实例分析
Mar 06 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
jquery动态添加option示例
Dec 30 #Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 #Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 #Javascript
使用js如何实现全选与全不选
Dec 30 #Javascript
javascript操作css属性
Dec 30 #Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 #Javascript
深入理解javascript中return的作用
Dec 30 #Javascript
You might like
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP7内核之Reference详解
2019/03/14 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
python 字符串格式化代码
2013/03/17 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python线程详解
2015/06/24 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
《鞋匠的儿子》教学反思
2014/03/02 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
化工实习心得体会
2014/09/09 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
二十年同学聚会感言
2015/07/30 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL