解决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 最近浏览过的商品的功能实现代码
May 14 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
微信小程序canvas实现签名功能
Jan 19 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数据过滤的方法
2013/10/30 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
微信access_token的获取开发示例
2015/04/16 PHP
php开发工具有哪五款
2015/11/09 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
Python中文字符串截取问题
2015/06/15 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
成品仓管员岗位职责
2013/12/11 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
师德师风个人整改措施
2014/10/27 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书