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 得到变量类型的函数
May 19 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
JavaScript正则表达式验证登录实例
Mar 18 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/12/30 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
python进阶教程之循环对象
2014/08/30 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python相对企业语言优势在哪
2020/06/12 Python
python如何设置静态变量
2020/09/07 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
物业公司的岗位任命书
2014/06/06 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
留学推荐信中文范文
2015/03/26 职场文书
单位介绍信格式范文
2015/05/04 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
Mysql事务索引知识汇总
2022/03/17 MySQL