jquery无法设置checkbox选中即没有变成选中状态


Posted in Javascript onMarch 27, 2014
$("input").attr("checked","checked")

设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,而且,值为checked,但是页面显示仍然为未选中状态
$("input").prop("checked",true);

ttributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始, .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 在jQuery1.6之前,这些属性使用.attr()方法取得,但是这并不是元素的attr属性。他们没有相应的属性(attributes),只有特性(property)。

例如,考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ,并假设它是一个JavaScript变量命名的elem :

elem.checked true (Boolean) 将改变复选框的状态
$(elem).prop("checked") true (Boolean) 将改变复选框的状态
elem.getAttribute("checked") "checked" (String) 不会改变的复选框的初始状态;
$(elem).attr("checked") (1.6) "checked" (String) 不会改变的复选框的初始状态;
$(elem).attr("checked") (1.6.1+) "checked" (String) 将改变复选框的状态
$(elem).attr("checked") (pre-1.6) true (Boolean) 将改变复选框的状态
根据W3C的表单规范 ,在checked属性是一个布尔属性,这意味着只要该 attribute 存在,即使它没有值,或是一个空字符串,该属性对应的 property 就是 true。以下推荐的是兼容浏览器方式,判断 checkbox 元素的 checked 属性是否为"真" 的方法:

if ( elem.checked ) 
if ( $(elem).prop("checked") ) 
if ( $(elem).is(":checked") )

如果你使用jQuery 1.6 ,代码if ( $(elem).attr("checked") ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop() 来改变其值。推荐使用上述方法之一,来取得 checked 的值。
Javascript 相关文章推荐
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 #Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 #Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 #Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 #Javascript
js无刷新操作table的行和列
Mar 27 #Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 #Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 #Javascript
You might like
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Windows下python3.6.4安装教程
2018/07/31 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
详解python中@的用法
2019/03/27 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
自荐信要包含哪些内容
2013/11/06 职场文书
护理学毕业生求职信
2013/11/14 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
文明之星事迹材料
2014/05/09 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
pandas中关于apply+lambda的应用
2022/02/28 Python