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

为什么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  
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"。截然不同

原文地址:https://www.cnblogs.com/68681395/p/3181165.html