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 ...
随机推荐
- λ(lambda)表达式
理论阶段 函数接口 函数接口是行为的抽象: 函数接口是数据转换器; java.util.Function包.定义了四个最基础的函数接口: Supplier<T>: 数据提供器,可以提供 T ...
- HDU 2193 AVL Tree
AVL Tree An AVL tree is a kind of balanced binary search tree. Named after their inventors, Adelson- ...
- ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator
在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...
- i.mx6 Android5.1.1 系统属性
属性变更的请求时init事件循环处理的另一个事件,在Android平台中,为了让运行中的所有进程共享系统运行时所需要的各种设置值,系统开辟了属性存储区域,并提供了访问该区域的API.属性由键(key) ...
- jsonp/ajax 自己的一些总结
data.json代码:[{"name": "张三", "age": 18}, {"name": "李四&qu ...
- 编写更好的jQuery代码（转）
这是一篇关于jQuery的文章,写到这里给初学者一些建议. 原文地址:http://flippinawesome.org/2013/11/25/writing-better-jquery-code/ ...
- [PHP] apache在worker模式配置fastcgi使用php-fpm
1.准备: dpkg -L apache2查看所有安装的apache2的应用 a2query -M查看apache2使用的模式 httpd -l旧版本查看当前apache模式 2.查看apache的进 ...
- Vim 技巧
:r 文件名 导入另一文件到当前文件中 :! 命令 可以不退出当前编辑的文本而能执行系统的命令 自定义快捷键 注意这里的^P这个是ctrl + V + P :map ^P I//<ESC> ...
- PostgreSQL Metadata
http://www.devart.com/dotconnect/postgresql/docs/MetaData.html In this overload first parameter is ...
- 03:成绩排序 个人博客：doubleq.win
个人博客:doubleq.win 03:成绩排序 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 给出班里某门课程的成绩单,请你按成绩从高到低对成绩单排序输出 ...