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 相关文章推荐
循环 vs 递归浅谈
Feb 28 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 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
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
浅谈Python 对象内存占用
2016/07/15 Python
Python logging模块用法示例
2018/08/28 Python
Python datetime 如何处理时区信息
2020/09/02 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
一年级数学教学反思
2014/02/01 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
质量主管工作职责
2014/09/26 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
日元符号 ¥
2022/02/17 杂记
Tomcat配置访问日志和线程数
2022/05/06 Servers