解决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动态调整iframe高度的代码
Apr 10 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php字符串截取的简单方法
2013/07/04 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
php实现的顺序线性表示例
2019/05/04 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
Express.JS使用详解
2014/07/17 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
视觉直观感受若干常用排序算法
2017/04/13 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
python学生管理系统学习笔记
2019/03/19 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
实现Python与STM32通信方式
2019/12/18 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
诉讼财产保全担保书
2014/05/20 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
实习介绍信模板
2015/01/30 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
财务出纳岗位职责
2015/03/31 职场文书
统计员岗位职责范本
2015/04/14 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫