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版本检测
Jan 04 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
js实现图片360度旋转
Jan 22 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
javascript实现前端成语点击验证
Jun 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
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP如何实现跨域
2016/05/30 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
一个javascript参数的小问题
2008/03/02 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python属于解释语言吗
2020/06/11 Python
Python常用类型转换实现代码实例
2020/07/28 Python
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
创建市级文明单位实施方案
2014/03/01 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
2015年三万活动总结
2015/03/25 职场文书
保留意见审计报告
2015/06/05 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
java如何实现socket连接方法封装
2021/09/25 Java/Android
Javascript的promise,async和await的区别详解
2022/03/24 Javascript