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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
用javascript实现分割提取页面所需内容
May 09 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
小程序实现图片预览裁剪插件
Nov 22 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
六个窍门助你提高Python运行效率
2015/06/09 Python
Python如何实现定时器功能
2020/05/28 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
工商企业管理实习自我鉴定
2013/12/04 职场文书
单位人事专员介绍信
2014/01/11 职场文书
安全教育月活动总结
2014/05/05 职场文书
电力培训心得体会
2014/09/02 职场文书
学习十八大标语
2014/10/09 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
罗马假日观后感
2015/06/08 职场文书
运动会开幕式主持词
2015/07/01 职场文书