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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
web前端开发也需要日志
Dec 09 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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中使用BigMap实例
2015/03/30 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
python数据挖掘需要学的内容
2019/06/23 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python批量修改xml属性的实现方式
2020/03/05 Python
pymysql模块使用简介与示例
2020/11/17 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
室内设计自我鉴定
2013/10/15 职场文书
保险专业大专生求职信
2013/10/26 职场文书
财务助理岗位职责
2013/11/10 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
环保建议书100字
2014/05/14 职场文书
森林防火标语
2014/06/23 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
停发工资证明范本
2015/06/12 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
Python&Matlab实现樱花的绘制
2022/04/07 Python