解决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实现id模糊查询的小例子
Mar 19 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
基于jquery实现图片放大功能
May 07 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
php 代码优化的42条建议 推荐
2009/09/25 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python打开网页和暂停实例
2014/09/30 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
python输出带颜色字体实例方法
2019/09/01 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
python变量的作用域是什么
2020/05/26 Python
python实现三壶谜题的示例详解
2020/11/02 Python
HTML5标签小集
2011/08/02 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
C++是不是类型安全的
2014/02/18 面试题
资料员的岗位职责
2013/11/20 职场文书
中学家长会邀请函
2014/01/17 职场文书
班组安全员工作职责
2014/02/01 职场文书
期中考试后的反思
2014/02/08 职场文书
《画家乡》教学反思
2014/04/22 职场文书
主题团日活动总结
2014/06/25 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
责任书范本大全
2015/05/11 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Mysql文件存储图文详解
2021/06/01 MySQL
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏