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+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
PHP用mysql数据库存储session的代码
2010/03/05 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Python中format()格式输出全解
2019/04/12 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
《绿色蝈蝈》教学反思
2014/03/02 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python