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 笔记 事件
Nov 02 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
Vue 换肤的示例实践
Jan 23 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
一周学会PHP(视频)Http下载
2006/12/12 PHP
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP count()函数讲解
2019/02/03 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
轮播的简单实现方法
2016/07/28 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
python提示No module named images的解决方法
2014/09/29 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Python json转字典字符方法实例解析
2020/04/13 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
幼教个人求职信范文
2013/12/02 职场文书
2014年学校工作总结
2014/11/20 职场文书
钢琴师观后感
2015/06/12 职场文书
跳高加油稿
2015/07/21 职场文书
九年级历史教学反思
2016/02/19 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS