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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 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新手上路(十一)
2006/10/09 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
javascript 获取图片颜色
2009/04/05 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
Python subprocess模块学习总结
2014/03/13 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python 检测图片是否有马赛克
2020/12/01 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
行政工作个人的自我评价
2014/02/13 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
个人培训总结
2015/03/05 职场文书
走进毛泽东观后感
2015/06/04 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python