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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
Element Rate 评分的使用方法
Jul 27 Javascript
vue中touch和click共存的解决方式
Jul 28 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写入数据库类代码分享
2011/07/26 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
DEFER怎么用?
2006/07/01 Javascript
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
2017/09/08 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
JavaScript如何操作css
2020/10/24 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
python的Template使用指南
2014/09/11 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
车间组长岗位职责
2013/12/20 职场文书
应用英语专业自荐信
2014/01/26 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
检讨书模板
2015/01/29 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis