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实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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&amp;java(三)
2006/10/09 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
Openlayers实现地图全屏显示
2020/09/28 Javascript
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
浅析python的Lambda表达式
2019/02/27 Python
Python用input输入列表的实例代码
2020/02/07 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
毕业生简历自我评价范文
2014/04/09 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
红歌会主持词
2015/07/02 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers