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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
简单分析javascript中的函数
Sep 10 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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使用NumberFormatter格式化货币的方法
2015/03/21 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
详解vue-cli3使用
2018/08/14 Javascript
Vue指令指令大全
2019/02/09 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python实现批量压缩图片
2018/01/25 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python交易记录整合交易类详解
2019/07/03 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
MySQL触发器的使用
2021/05/24 MySQL
如何在Python中妥善使用进度条详解
2022/04/05 Python