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原型链和继承
Sep 23 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
JS中数据结构之栈
Jan 01 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
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删除非空目录的函数代码小结
2013/02/28 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
js的event详解。
2006/09/06 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python进程间通信用法实例
2015/06/04 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
竞聘副主任科员演讲稿
2014/01/11 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
电力工程合作意向书
2015/05/11 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS