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去掉字符串里的所有空格
Feb 08 Javascript
Prototype Selector对象学习
Jul 23 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
canvas知识总结
Jan 25 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
JavaScript仿京东轮播图效果
Feb 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 SQL之where语句生成器
2009/03/24 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
一个JS翻页效果
2007/07/23 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python实现解数独程序代码
2017/04/12 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
制药工程专业职业生涯规划范文
2014/03/10 职场文书
2015年财政所工作总结
2015/04/25 职场文书
研讨会致辞
2015/07/31 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技