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 相关文章推荐
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
Javascript Objects详解
Sep 04 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
如何编写jquery插件
Mar 29 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
react-native之ART绘图方法详解
Aug 08 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
动易数据转成dedecms的php程序
2007/04/07 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
php和nginx交互实例讲解
2019/09/24 PHP
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
浅析Python多线程下的变量问题
2015/04/28 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
解决python replace函数替换无效问题
2020/01/18 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Python定义函数实现累计求和操作
2020/05/03 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
期终自我鉴定
2014/02/17 职场文书
《雷雨》教学反思
2014/02/20 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
入党积极分子考察意见
2015/06/02 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python