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实现的网站首页随机公告随机公告
Mar 14 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
如何正确理解vue中的key详解
Nov 02 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP时间处理类操作示例
2018/09/05 PHP
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python快速排序代码实例
2013/11/21 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
实例讲解python中的序列化知识点
2018/10/08 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
使用Python实现批量ping操作方法
2020/05/06 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
车间统计员岗位职责
2014/01/05 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
严以律己学习心得体会
2016/01/13 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
nginx共享内存的机制详解
2022/03/21 Servers
vue实现拖拽交换位置
2022/04/07 Vue.js