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 相关文章推荐
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
javascript 模块依赖管理的本质深入详解
Apr 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
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
理解JS事件循环
2016/01/07 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
Python更新所有已安装包的操作
2020/02/13 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
会计实习生自我鉴定
2013/12/12 职场文书
经典大学生求职信范文
2014/01/06 职场文书
打架检讨书100字
2014/01/08 职场文书
毕业实习评语
2014/02/10 职场文书
校长四风对照检查材料
2014/09/27 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
详解Django中 render() 函数的使用方法
2021/04/22 Python