解决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 CSS样式控制 学习笔记
Jul 23 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
javascript object array方法使用详解
Dec 03 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
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
JS实现php的伪分页
2008/05/25 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
vue.js表格分页示例
2016/10/18 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
信息滚动效果的实例讲解
2017/09/18 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
React学习之JSX与react事件实例分析
2020/01/06 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
消防应急演练方案
2014/02/12 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
企业法人代表证明书
2014/09/27 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python