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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
JavaScript中的对象化编程
Jan 16 Javascript
javascript操作cookie_获取与修改代码
May 21 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
js面向对象方式实现拖拽效果
Mar 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
桌面中心(三)修改数据库
2006/10/09 PHP
关于尾递归的使用详解
2013/05/02 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
php对数组排序代码分享
2014/02/24 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
php递归函数怎么用才有效
2018/02/24 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
FCK调用方法..
2006/12/21 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
python中Flask框架简单入门实例
2015/03/21 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
生物学学生自我评价
2014/01/17 职场文书
检讨书模板
2015/01/29 职场文书
学校党支部承诺书
2015/04/30 职场文书
父母教会我观后感
2015/06/17 职场文书
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技