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 学习笔记(三)
Dec 29 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
vue如何批量引入组件、注册和使用详解
May 12 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的静态成员函数效率更高的原因
2014/06/13 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php导入模块文件分享
2015/03/17 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
sails框架的学习指南
2014/12/22 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
vuex实现的简单购物车功能示例
2019/02/13 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python列表生成器的循环技巧分享
2015/03/06 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python如何获取文件指定行的内容
2020/05/27 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
应付会计岗位职责
2013/12/12 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
小学教师寄语大全
2014/04/03 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
Python函数对象与闭包函数
2022/04/13 Python
python中使用redis用法详解
2022/12/24 Redis