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调用WebService的实现代码
Jun 19 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
js实现无缝滚动特效
Dec 20 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 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 xml实例 留言本
2009/03/20 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
Python程序设计入门(1)基本语法简介
2014/06/13 Python
python正则表达式面试题解答
2020/04/28 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
班组长的岗位职责
2013/12/09 职场文书
报到证丢失证明
2014/01/11 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
美术毕业生求职信
2014/02/25 职场文书
本科毕业生求职信
2014/06/15 职场文书
会计电算化实训报告
2014/11/04 职场文书
整改落实自查报告
2014/11/05 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
实习单位意见
2015/06/04 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
进行数据处理的6个 Python 代码块分享
2022/04/06 Python