Jquery 获取Checkbox值，prop 和 attr 函数区别
总结：
| 版本 | 1.6 | 1.6 | 1.4 | 1.4 |
| 函数 | 勾选 | 取消勾选 | 勾选 | 取消勾选 |
attr('checked')
|
checked | undefined | true | false |
.prop('checked')
|
true | false | 1.6才有此方法 | |
.is(':checked')
|
true | false | true | false |
elem.checked
true (Boolean) Will change with checkbox state
$(elem).prop("checked")
true (Boolean) Will change with checkbox state
elem.getAttribute("checked")
"checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6)
"checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6.1+)
"checked" (String) Will change with checkbox state
$(elem).attr("checked")(pre-1.6)
true (Boolean) Changed with checkbox state
今天在用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined.
解决这个文章我参考了这个帖子：
http://bugs.jquery.com/ticket/9812
| Attribute/Property | .attr() |
.prop() |
|---|---|---|
| accesskey | √ | |
| align | √ | |
| async | √ | √ |
| autofocus | √ | √ |
| checked | √ | √ |
| class | √ | |
| contenteditable | √ | |
| draggable | √ | |
| href | √ | |
| id | √ | |
| label | √ | |
| location ( i.e. window.location ) | √ | √ |
| multiple | √ | √ |
| readOnly | √ | √ |
| rel | √ | |
| selected | √ | √ |
| src | √ | |
| tabindex | √ | |
| title | √ | |
| type | √ | |
width ( if needed over .width() ) |
√ |
下文来自www.jquery.com The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop()method provides a way to explicitly retrieve property values, while .attr() retrieves attributes For example, selectedIndex, tagName, nodeName, nodeType,ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.
elem.checked
true (Boolean) Will change with checkbox state
$(elem).prop("checked")
true (Boolean) Will change with checkbox state
elem.getAttribute("checked")
"checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6)
"checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6.1+)
"checked" (String) Will change with checkbox state
$(elem).attr("checked")(pre-1.6)
true (Boolean) Changed with checkbox state
原文:http://www.cnblogs.com/-run/archive/2011/11/16/2251569.html
1.6版情况：
//勾选后输出：
//attr('checked'): checked
//.prop('checked'): true
//.is(':checked'): true //取消勾选输出： //.attr('checked'): undefined
//.prop('checked'): false
//.is(':checked'): false
jquery1.4 版本：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 p { margin: 20px 0 0 }
6 b { color: blue; }
7 </style>
8 <script src="../js/jquery-1.4.4.js"></script>
9 </head>
10 <body>
11
12 <input id="check1" type="checkbox" checked="checked">
13 <label for="check1">Check me</label>
14 <p></p>
15
16 <script>
17 $("input").change(function() {
18 var $input = $(this);
19 $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
20 + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
21 }).change();
22 </script>
23
24 </body>
25 </html>
勾选后输出：
//attr('checked'): true
//.prop('checked') 1.6后版本才有这个方法
//.is(':checked'): true 取消勾选输出： //.attr('checked'): false
//.prop('checked')1.6后版本才有这个方法
//.is(':checked'): false
结论： attr('checked'): 在1.6后版本，所获取的值是 "checked"/"underfined" ，之前所获得的值是"false"/"true"。截然不同
Jquery 获取Checkbox值，prop 和 attr 函数区别的更多相关文章
- jquery中prop和attr的区别
jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...
- jquery里prop和attr的区别
本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法. 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可 ...
- jQuery获取checkbox选中项等操作及注意事项
jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...
- jQuery获取多种值的方法
**jQuery 1.3.2版本下的 jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置** 1.判断是否已经打 ...
- jquery获取input值的各种情况
jQuery获取多种input值的方法 获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").at ...
- jQuery的prop和attr的区别，及判断复选框是否选中
jQuery的prop和attr的区别 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...
- jquery中的prop和attr比较区别
近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...
- jquery获取kindEditor值
KE.show({ id: 'txtMessage', imageUploadJson: '/ajax/Manager/keupload.ashx?ptyp ...
- js获取checkbox值的方法
js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...
随机推荐
- finally是否始终执行
The only times finally won't be called are: If you call System.exit() If the JVM crashes first If th ...
- Memcached分布式算法详解--转
http://xiexiejiao.cn/java/memcached-consistent-hashing.html Memcached分布式算法在网上一搜可以找到一大片了,不过对于Memcache ...
- idp sp sso---SAML Single Sign-On (SSO) Service for Google Apps
src: https://developers.google.com/google-apps/sso/saml_reference_implementation Security Assertion ...
- Android Anwendungsprogramm Entwicklung
1.Einführung des Androids 1.1 Grundlage der Anwendung Activity ist eine Spezifische Bespiel von Andr ...
- Uboot流程分析
1. uboot的配置分析 1).配置入口分析 首先分析配置: 从make mx6dl_sabresd_android_config可知配置项,搜索Makefile: mx6solo_sabresd_ ...
- CSS浮动的3个特性（高手绕行）
1. 浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示: 代码示例: <!DOCTYPE HTML > <html> <hea ...
- Linux多进程之间的文件锁
之前对于文件的操作通常在一个进程中完成,最近需要在两个进程中对同一个文件进行操作.故想到了文件锁. Linux下可以使用flock()函数对文件进行加锁解锁等操作.简单介绍下flock()函数: 表头 ...
- NET Core 应用程序 IIS 运行报错 502.3-Gateway
转自:http://www.zmland.com/forum.php?mod=viewthread&tid=941 将 NET Core 应用程序部署在 IIS 环境,默认配置下,如果任务执行 ...
- 在IIs上部署asp.net core2.1项目
转自:https://www.cnblogs.com/jasonduan/p/9193702.html 在IIS上部署你的ASP.NET Core 2.1项目 1.在控制面板→程序→启用或关闭Wi ...
- SpringJunit4 进行单元测试（实例篇--紧接上一章）
前言: 在做WEB项目时,我们写好了一个Dao和Service后,接下来就是要进行单元测试,测试的时候还要等到Spring容器全部加载完毕后才能进行,然后通过拿到ApplicationContext对 ...