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 attachEvent传递参数的办法
Dec 14 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 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实现多图片上传类实例
2014/07/26 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
js 内存释放问题
2010/04/25 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
angularJS开发注意事项
2018/05/26 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
PyMongo安装使用笔记
2015/04/27 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
岗位廉洁从政承诺书
2014/03/27 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
天猫活动策划方案
2014/08/21 职场文书
七一讲话心得体会
2014/09/05 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
人事专员岗位职责
2015/02/03 职场文书
2015年环卫工作总结
2015/04/28 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
综治目标管理责任书
2015/05/11 职场文书
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS