基于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 相关文章推荐
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
js获取class的所有元素
Mar 28 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 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 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
php实现计数器方法小结
2015/01/05 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
详细解析Python中的变量的数据类型
2015/05/13 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
Python中调用其他程序的方式详解
2019/08/06 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
python中JWT用户认证的实现
2020/05/18 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
《草虫的村落》教学反思
2014/02/16 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
Python中的datetime包与time包包和模块详情
2022/02/28 Python