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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
字符串反转_JavaScript
Apr 28 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
如何将python中的List转化成dictionary
2016/08/15 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
如何写出好的Java代码
2014/04/25 面试题
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
校园达人秀策划书
2014/01/12 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
维修工先进事迹
2014/05/29 职场文书
家长高考寄语
2015/02/27 职场文书
校园广播站开场白
2015/06/01 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书