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 ...
随机推荐
- AES加密的四种模式详解
对称加密和分组加密中的四种模式(ECB.CBC.CFB.OFB) 一. AES对称加密: A ...
- python pip 安装OpenCV
cmd pip install opencv-contrib-python -i https://pypi.mirrors.ustc.edu.cn/simple/
- WPF DataTemplate與ControlTemplate
一. 前言 什麼是DataTemplate? 什麼是ControlTemplate? 在stackoverflow有句簡短的解釋 "A DataTemplate, therefore ...
- eclipse 配置mapreduce环境出错
初学mapreduce,想在eclipse上配置mapreduce的环境,网上之类的教程,很多但是按照教程配之后,并不能正常运行. 碰到下面的错误: 15/10/17 20:10:39 INFO jv ...
- Eclipse项目红感叹号
原因:显示红色感叹号是因为jar包的路径不对 解决:在项目上右击Build Path -> Configure Build Paht...(或Propertise->Java Build ...
- jmap查看内存使用情况与生成heapdump--转
http://www.webspherechina.net/home/space.php?uid=191&do=blog&id=7572 如果想分析自己的JAVA Applicatio ...
- 四大CPU体系结构：ARM、X86/Atom、MIPS、PowerPC
补充介绍一下RISC:RISC(reduced instruction set computer,精简指令集计算机)是一种执行较少类型计算机指令的微处理器,起源于80年代的MIPS主机(即RISC机) ...
- Java学习--list，set,Map接口使用
list接口: 泛型:规定list中的元素的类型 /* * * 泛型不能使用基本数据类型(可以使用基本类型的包装类) * */ public void tes ...
- 多线程-synchronized锁
package 多线程.synchronized锁; /*. * * * * */ public class Sale implements Runnable { ; @Override public ...
- Qless 相关知识
Qless是一个基于redis的分布式任务架构.相关代码在 https://github.com/seomoz/qless 它是完全有lua实现的,依靠 redis 对lua的支持,http://ww ...