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 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 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的安全
2006/10/09 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
jquery简单体验
2007/01/10 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python爬虫之自制英汉字典
2019/06/24 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
保护环境建议书400字
2014/05/13 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
2014年销售员工作总结
2014/12/01 职场文书
网络舆情信息简报
2015/07/21 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL