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 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
了解重排与重绘
May 29 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
js+html实现点名系统功能
Nov 05 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php自定义错误处理用法实例
2015/03/20 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
JavaScript实现留言板案例
2020/03/17 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
python连接池实现示例程序
2013/11/26 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Python中按键来获取指定的值
2019/03/02 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python count函数使用方法实例解析
2020/03/23 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
三年大学生活自我鉴定
2014/01/21 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
学生检讨书怎么写
2015/05/07 职场文书
多人股份制合作协议书
2016/03/19 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技