解决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 Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
javascript中的new使用
Mar 20 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
js图片上传的封装代码
Aug 01 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
react的hooks的用法详解
Oct 12 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
vue超时计算的组件实例代码
2018/07/09 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
python创建线程示例
2014/05/06 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python回调函数中使用多线程的方法
2017/12/25 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
高中毕业生生活的自我评价
2013/12/08 职场文书
校园元旦活动总结
2014/07/09 职场文书
先进个人推荐材料
2014/12/29 职场文书
三方合作意向书范本
2015/05/09 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
python 提取html文本的方法
2021/05/20 Python
Nginx 常用配置
2022/05/15 Servers