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 parseInt 函数分析(转)
Mar 21 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
Javascript的比较汇总
Jul 25 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
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数据缓存的使用说明
2013/05/10 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
ie focus bug 解决方法
2009/09/03 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
vue实现微信分享功能
2018/11/28 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
Python批量修改图片分辨率的实例代码
2019/07/04 Python
django 消息框架 message使用详解
2019/07/22 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
物业管理个人自我评价
2013/11/08 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
2016年学校招生广告语
2016/01/28 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python