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实现的分页函数
Dec 22 Javascript
javascript编程起步(第六课)
Jan 10 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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应用技巧
2008/03/27 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
javascript表单正则应用
2017/02/04 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
如何提高python 中for循环的效率
2020/04/15 Python
详解python程序中的多任务
2020/09/16 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
本科生职业生涯规划书范文
2014/01/21 职场文书
服务生自我鉴定
2014/01/22 职场文书
岗位聘任书范文
2014/03/29 职场文书
党员大会主持词
2014/04/02 职场文书
科技工作者先进事迹
2014/08/16 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
2015年党小组工作总结
2015/05/26 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android