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 相关文章推荐
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
详解Node.JS模块 process
Aug 31 Javascript
js实现简单图片拖拽效果
Feb 22 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 ci框架验证码实例分析
2013/06/26 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Django中的forms组件实例详解
2018/11/08 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
九年级历史教学反思
2014/01/27 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
辞职信标准格式
2015/02/27 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
解决MySQL报“too many connections“错误
2022/04/19 MySQL