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 HashTable
Jan 22 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
Smarty变量用法详解
2016/05/11 PHP
PHP中header用法小结
2016/05/23 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
小学开学寄语
2014/01/19 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
员工给公司的建议书
2019/06/24 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python