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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
基于react项目打包css引用路径错误解决方案
Oct 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 文件类型判断代码
2009/03/13 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
酒店司机岗位职责
2013/12/14 职场文书
励志演讲稿200字
2014/08/21 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python