解决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 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
js的一些常用方法小结
Jun 29 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
vue axios整合使用全攻略
May 24 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 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
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php文件上传的简单实例
2013/10/19 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
pandas多级分组实现排序的方法
2018/04/20 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
python如何处理程序无法打开
2020/06/16 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
PHP如何删除一个Cookie值
2012/11/15 面试题
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
机电专业毕业生求职信
2013/10/27 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
医德考评自我评价
2014/09/14 职场文书
计划生育个人总结
2015/03/02 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server