基于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 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
浅谈javascript中return语句
Jul 15 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
在Django框架中设置语言偏好的教程
2015/07/27 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
基于python调用psutil模块过程解析
2019/12/20 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
python中的yield from语法快速学习
2020/11/06 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
求职推荐信
2013/10/28 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
租房协议书样本
2014/08/20 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android