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中关于String对象的replace使用详解
May 24 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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
一个目录遍历函数
2006/10/09 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
php实现的顺序线性表示例
2019/05/04 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
利用Python实现kNN算法的代码
2019/08/16 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
flask开启多线程的具体方法
2020/08/02 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
四年的大学生生活自我评价
2013/12/09 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
道歉的话语大全
2015/05/12 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
医者仁心观后感
2015/06/17 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书