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 相关文章推荐
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
javascript数组详解
Oct 22 Javascript
JS获取时间的方法
Jan 21 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php 变量定义方法
2009/06/14 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
浅谈jQuery中的事件
2015/03/23 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
python绘图方法实例入门
2015/05/19 Python
python并发和异步编程实例
2018/11/15 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
小学端午节活动总结
2015/02/11 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
预备党员半年考察意见
2015/06/01 职场文书
导游词之吉林吉塔
2019/11/11 职场文书