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实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
openlayers实现地图测距测面
Sep 25 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入门小知识
2008/03/24 PHP
php微信开发之图片回复功能
2018/06/14 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
Vue3为什么这么快
2020/09/23 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Django与JS交互的示例代码
2017/08/23 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python通过http下载文件的方法详解
2019/07/26 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
学前班教学反思
2016/02/24 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python