您的位置：首页 > Web前端 > JQuery

Jquery 获取Checkbox值，prop 和 attr 函数区别

2013-07-10 00:31 706 查看

总结：

版本	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

为什么jquery 1.6+增加了.prop()方法，因为在有些浏览器中比如说只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"。所以，从1.6开始，jq提供新的方法“prop”来获取这些属性。

以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr，什么时候使用prop？？

1.添加属性名称该属性就会生效应该使用prop.

2.是有true,false两个属性使用prop.

3.其他则使用attr

项目中jquery升级的时候大家要注意这点！

以下是官方建议attr(),prop()的使用：

Attribute/Property	.attr()	.prop()
accesskey	√
align	[b]√[/b]
async	[b]√[/b]	[b]√[/b]
autofocus	[b]√[/b]	[b]√[/b]
checked	[b]√[/b]	[b]√[/b]
class	[b]√[/b]
contenteditable	[b]√[/b]
draggable	[b]√[/b]
href	[b]√[/b]
id	[b]√[/b]
label	[b]√[/b]
location ( i.e. window.location )	[b]√[/b]	[b]√[/b]
multiple	[b]√[/b]	[b]√[/b]
readOnly	[b]√[/b]	[b]√[/b]
rel	[b]√[/b]
selected	√	[b]√[/b]
src	[b]√[/b]
tabindex	[b]√[/b]
title	[b]√[/b]
type	[b]√[/b]
width ( if needed over .width() )	[b]√[/b]

下文来自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"。截然不同

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航