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 控制CSS样式表
Aug 20 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
javascript常用代码段搜集
Dec 04 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
JavaScript实现京东快递单号查询
Nov 30 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
浅谈Python中数据解析
2015/05/05 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
django model通过字典更新数据实例
2020/04/01 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
2015年技术工作总结范文
2015/04/20 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
如何在Python项目中引入日志
2021/05/31 Python
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
vue的项目如何打包上线
2022/04/13 Vue.js