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加密解密7种方法总结分析
Oct 07 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
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中__get()和__set()的用法实例详解
2013/06/04 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
详解Python做一个名片管理系统
2019/03/14 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Python logging模块原理解析及应用
2020/08/13 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
结婚喜宴主持词
2014/03/14 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
2015中秋祝酒词
2015/08/12 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
SQL Server中的游标介绍
2022/05/20 SQL Server