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 相关文章推荐
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
html-webpack-plugin修改页面的title的方法
Jun 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
MVVM 双向绑定的实现代码
2018/06/21 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python3实现域名查询和whois查询功能
2018/06/21 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
新加坡交友网站:be2新加坡
2019/04/10 全球购物
教导处工作制度
2014/01/18 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
民主生活会发言材料
2014/10/20 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
邀请函的格式
2015/01/30 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
学校运动会通讯稿
2015/07/18 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技