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中bind()方法的使用与实现
Apr 29 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php页面防重复提交方法总结
2013/11/25 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
JavaScript解析JSON数据示例
2019/07/16 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python切片用法实例教程
2014/09/08 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
使用python实现tcp自动重连
2017/07/02 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python+logging+yaml实现日志分割
2019/07/22 Python
django之自定义软删除Model的方法
2019/08/14 Python
橄榄树药房:OLIVEDA
2019/09/01 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
大学活动总结范文
2014/04/29 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python
Oracle 死锁的检测查询及处理
2021/09/25 Oracle