Jquery1.6版本后attr的变化,灰常委屈_jquery 1.6 之前的版本 .attr应该如何替换-优快云博客

本文探讨了Jquery1.6版本后对于checkbox的checked状态获取方式的变化，详细对比了使用.attr()和.prop()方法的区别，并通过示例展示了不同版本下获取到的不同结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于上次发表的 Jquery 获取checkbox的checked问题，从大家的评论中得到了答案，原因是Jquery1.6版本后 attr 给改了，悲剧的我不知道，给耍了半天。

认真地去看了官方的最新文档，当中有这样的一段话 = =！

可见，给YIN了吧。下面发个改动后的效果：
jquery1.6+版本：

下文来自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

//勾选后输出：
//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