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 26 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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
Zend引擎的发展 [15]
2006/10/09 PHP
PHP 中执行系统外部命令
2006/10/09 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
vue debug 二种方法
2018/09/16 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
基于Django用户认证系统详解
2018/02/21 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
秋季红领巾广播稿
2014/01/27 职场文书
学生打架检讨书
2014/02/14 职场文书
2015年科室工作总结
2015/04/10 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis