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中匿名函数的N种写法
Sep 08 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
微信小程序 生成携带参数的二维码
Oct 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
PHP模拟QQ登录的方法
2015/07/29 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
python 网络编程常用代码段
2016/08/28 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Django实现分页显示效果
2019/10/31 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
信访工作者先进事迹
2014/01/17 职场文书
二年级数学教学反思
2014/01/21 职场文书
中青班党性分析材料
2014/02/16 职场文书
留学推荐信英文范文
2015/03/26 职场文书
新员工辞职信范文
2015/05/12 职场文书
民间借贷被告代理词
2015/05/23 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
学校运动会感想
2015/08/10 职场文书
python Polars库的使用简介
2021/04/21 Python
golang 实现时间戳和时间的转化
2021/05/07 Golang