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加密解密7种方法总结分析
Oct 07 Javascript
javascript 单选框,多选框美化代码
Aug 01 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
vue自定义指令实现方法详解
Feb 11 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
我的论坛源代码(五)
2006/10/09 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
解析link_mysql的php版
2013/06/30 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
JavaScript错误处理
2015/02/03 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python中管道用法入门实例
2015/06/04 Python
Python 函数基础知识汇总
2018/03/09 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
初一英语教学反思
2016/02/15 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers