解决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 相关文章推荐
javascript 写的一个简单的timer
Jul 30 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
PHP中实现进程间通讯
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
vue-router 按需加载 component: () => import() 报错的解决
2020/09/22 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
django中send_mail功能实现详解
2018/02/06 Python
python调用API实现智能回复机器人
2018/04/10 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
优秀共产党员先进事迹
2014/01/27 职场文书
银行开业庆典方案
2014/02/06 职场文书
抄作业检讨书
2014/02/17 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
欠款证明
2015/06/24 职场文书
九年级数学教学反思
2016/02/17 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL
详解OpenCV曝光融合
2022/04/29 Python
python开发人人对战的五子棋小游戏
2022/05/02 Python