基于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 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python类中super() 的使用解析
2019/12/19 Python
Python使用进程Process模块管理资源
2020/03/05 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
营业员实习自我鉴定
2013/12/07 职场文书
工作自我评价怎么写
2014/01/29 职场文书
经典演讲稿汇总
2014/05/19 职场文书
推广活动策划方案
2014/08/23 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
党员个人总结范文
2015/02/14 职场文书
运动会班级前导词
2015/07/20 职场文书
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript