jQuery实现checkbox全选的方法


Posted in Javascript onJune 10, 2015

本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下:

通过checkbox 进行全选和取消全选的操作,如果通过toggle进行处理,则会出现checkbox无法显示对勾的问题。

使用click事件,根据checked属性进行判断即可。

示例:

$("#chkRreviewOffline").click(function(){ 
  if(this.checked){ 
    $('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){ 
      this.checked=true; 
    }); 
  }else{ 
    $('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){ 
      this.checked=false; 
    }); 
  } 
}); 
$('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){ 
  $(this).click(function(){ 
    if(this.checked){ 
      //console.log('checked'); 
    }else{ 
      //console.log('not checked'); 
      $("#chkRreviewOffline").get(0).checked=false; 
    } 
  }); 
});

其中,下面的each()方法用于当页面其它的checkbox有未选中状态,则全选状态取消。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
泛谈JS逻辑判断选择器 || &&
May 24 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 #Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 #Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 #Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 #Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 #Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 #Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 #Javascript
You might like
用ODBC的分页显示
2006/10/09 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
js正则相关知识点专题
2018/05/10 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
javascript实现日历效果
2019/06/17 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
python通过链接抓取网站详解
2019/11/20 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
行政人员工作职责
2013/12/05 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
四下基层实施方案
2014/03/28 职场文书
解除劳动合同协议书
2014/04/14 职场文书
党员创先争优活动总结
2014/05/04 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
陪护人员误工证明
2015/06/24 职场文书
2016春季运动会前导词
2015/11/25 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB