基于jQuery的checkbox全选问题分析


Posted in Javascript onNovember 18, 2016

本文实例分析了基于jQuery的checkbox全选问题。分享给大家供大家参考,具体如下:

最近开发项目时遇到一个很奇怪的问题,就是checkbox的全选与全不选
使用jQuery的框架。一直是使用

//检测选中的checkbox
$('input[name="abc"]:checked').each(function(){})

但是,发现我需要全选的时候,使用

$('input[name="abc"]').attr('checked',true);
$('input[name="abc"]').attr('checked',false);

时,第一次加载的时候管用,再次点击就只显示它自己了
但是点击的时候,查看源代码,属性checked已经添加上了
百思不得其解,最后搜索到,原来是 attr属性 对于checked来说他不会使dom样式改变,只会将它的属性值改变,jquery提供了取而代之的方法,如下就可以了

$('input[name="abc"]').prop('checked',true);
$('input[name="abc"]').prop('checked',false);

但是,问题又来了,不全选时我检测不到哪个元素被点击了,然后就在name上做文章

$('input[name="abc[]:checked"').each(function(i){});
//或者
$('input[name="abc[]"').each(function(i){
  var flag = $(this).prop('checked');
  if(flag){
   //$(this) 即为选中元素
 }
})

问题解决。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
详解jQuery中的事件
Dec 14 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
JavaScript动态数量的文件上传控件
Nov 18 #Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 #Javascript
Node.js 实现简单小说爬虫实例
Nov 18 #Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 #Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 #Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 #Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
python学习数据结构实例代码
2015/05/11 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
python定义具名元组实例操作
2021/02/28 Python
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
课程改革实施方案
2014/03/16 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
干部鉴定材料
2014/05/18 职场文书
英语专业自荐书
2014/06/13 职场文书
财务会计专业自荐书
2014/06/30 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
鸦片战争观后感
2015/06/09 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android