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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
Javascript实现字数统计
Jul 03 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
JS如何使用剪贴板操作Clipboard API
May 17 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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
教你安装python Django(图文)
2013/11/04 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python 生成器协程运算实例
2017/09/04 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python求凸包及多边形面积教程
2020/04/12 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
python实现学生信息管理系统源码
2021/02/22 Python
党员教师工作决心书
2014/03/13 职场文书
社区党建工作总结2015
2015/05/13 职场文书
区域销售大会开幕词
2016/03/04 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python