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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
JavaScript中set与get方法用法示例
Aug 15 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
详解php命令注入攻击
2019/04/06 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python字符串的常用操作方法小结
2016/05/21 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
对python生成业务报表的实例详解
2019/02/03 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
使用索引有什么好处
2016/07/27 面试题
TCP/IP模型的分界线
2012/12/01 面试题
介绍一下EJB的体系结构
2012/08/01 面试题
公司周年庆典邀请函
2014/01/12 职场文书
司马光教学反思
2014/02/01 职场文书
产品质量承诺范本
2014/03/31 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
世博会口号
2014/06/20 职场文书
2014年领班工作总结
2014/11/25 职场文书
供应商食品安全承诺书
2015/04/29 职场文书