解决jquery操作checkbox火狐下第二次无法勾选问题


Posted in Javascript onFebruary 10, 2014

最近在工作中使用jquery操作checkbox,使用下面方法进行全选、反选:

var ischecked=allCheckObj.is(':checked'); 
ischecked?checksObj.attr('checked',true):checksObj.attr('checked',false);

调试时在ie没有问题,考虑到兼容性,试试了firefox,遇到了问题。于是乎,做了如下实验:
复选框绑定了click事件,点一次选中,再点击取消选中,依次类推。这个功能在ie中没问题,但是在firefox中测试的时候,前两次都没有问题,可以正常显示选中和取消,但当再去选中的时候,复选框的属性checkbox值变为"checked",没问题,但是复选框却不在显示选中状态,明明属性值改了,但是却不显示勾选,太诡异了。代码修改了却得不到正确的显示状态,纠结了很久,找不到原因。
正解:后来经偶像指点,原来是jQuery版本问题。我操作属性用的是
$("**").attr("attrName");而jQuery的版本用的是1.9,这就是存在一个兼容性和稳定性问题。
jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,即
$("input[type='checkbox']").prop("checked"); 
$("input[type='checkbox']").prop("disabled", false); 
$("input[type='checkbox']").prop("checked", true);

在使用是将attr改为prop,问题得解。
你遇到这个奇怪的问题了吗?赶紧试试吧
Javascript 相关文章推荐
基于jquery的15款幻灯片插件
Apr 10 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
js判断undefined类型示例代码
Feb 10 #Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 #Javascript
js网页实时倒计时精确到秒级
Feb 10 #Javascript
js格式化时间和js格式化时间戳示例
Feb 10 #Javascript
javaScript 页面自动加载事件详解
Feb 10 #Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 #Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
Feb 10 #Javascript
You might like
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python networkx包的实现
2020/02/14 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
汽车专业毕业生自荐信
2013/11/03 职场文书
信息工程学院毕业生推荐信
2013/11/05 职场文书
社区党员先进事迹
2014/01/22 职场文书
职称评定自我鉴定
2014/03/18 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
2014年销售员工作总结
2014/12/01 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
让生命充满爱观后感
2015/06/08 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript