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 ...
随机推荐
- linux mint 18.2 安装wireshark
Method 1: Via PPA Step 1: Add the official PPA sudo add-apt-repository ppa:wireshark-dev/stable Step ...
- python跳出多重循环
# -*- coding=utf-8 -*- """ 如何结束多重循环,在单层循环中,可以用break跳出循环,那两层,三层呢? """ # ...
- Go语言学习笔记三： 常量
Go语言学习笔记三: 常量 定义常量 常量就是在声明后不能再修改的量. const x int = 100 const y string = "abc" const z = &qu ...
- varchar(n) 和 int(n)
mysql(测试版本为5.6) 的varchar必须加范围,否则报错: mysql> CREATE TABLE test ( -> id INT, -> name VARCHAR - ...
- poj 1222EXTENDED LIGHTS OUT
高斯消元的题本质思想一样. 学习网址:http://www.cnblogs.com/rainydays/archive/2011/08/31/2160748.html #include <ios ...
- 基于angular2+ 的 http服务封装
1.定义http-interceptor.service.ts服务,统一处理http请求 /** * name:http服务 * describe:对http请求做统一处理 * author:Angu ...
- 十五、读写锁ReentrantReadWriteLock
一.简介 有时候我们对资源的修改操作非常地少,但是读取的频率却很高.如果采用一般的互斥锁,那么大量的读取操作也需要做等待.基于读写分离的思想,我们可以使用JDK的读写锁来处理这种情况. 1)读读不互斥 ...
- 时间复杂度为O（logN）的常用算法
时间复杂度为O(logN)的常用算法 折半查找 /* * 折半查找 * 默认查找的数组已经排过序 */ public static int binarySearch(int[] a,int x){ i ...
- vim 配置文件.vimrc，高亮+自动缩进+行号+折叠+优化
将一下代码copy到 用户目录下 新建文件为 .vimrc保存即可生效: 如果想所有用户生效 请修改 /etc/vimrc (建议先cp一份)"====================== ...
- IniHelper——INI操作辅助类
使用INI配置文件,简单便捷. 该辅助工具类为C#操作INI文件的辅助类,源码在某位师傅的基础上完善的来,因为忘记最初的来源了,因此不能提及引用,在此深感遗憾,并对贡献者表示感谢. using Sys ...