解决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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
TypeScript开发Node.js程序的方法
Apr 30 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 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内置过滤器FILTER使用实例
2014/06/25 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
javascript求日期差的方法
2016/03/02 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
Python中turtle作图示例
2017/11/15 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
详解如何设置Python环境变量?
2019/05/13 Python
python实现月食效果实例代码
2019/06/18 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
五年后的职业生涯规划
2014/03/04 职场文书
安踏广告词改编版
2014/03/21 职场文书
2014年文员工作总结
2014/11/18 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
酒店员工手册范本
2015/05/14 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
用python画城市轮播地图
2021/05/28 Python
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技