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模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
React.js入门学习第一篇
Mar 30 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 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循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
10款最好的Web开发的 Python 框架
2015/03/18 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
竞选学生会演讲稿
2014/04/25 职场文书
高中运动会广播稿
2014/09/16 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
简单租房协议书
2014/10/21 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL