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

2021-12-07 13:51 jQuery

总结：<table width="564"><tbody ><tr class="firstRow"><td valign="top" width="176" >版本</td><td valign="top" width="97" >1.6</td><td valign="top" width="98" >1.6</td><td valign="top" width="86" >1.4</td><td valign="top" width="105" >1.4</td></tr><tr ><td valign="top" width="176" >函数</td><td valign="top" width="97" >勾选</td><td valign="top" width="98" >取消勾选</td><td valign="top" width="86" >勾选</td><td valign="top" width="105" >取消勾选</td></tr><tr ><td valign="top" width="176" ><pre >attr('checked')</pre></td><td valign="top" width="97" >checked</td><td valign="top" width="98" >undefined</td><td valign="top" width="86" >true</td><td valign="top" width="105" >false</td></tr><tr ><td valign="top" width="176" ><pre >.prop('checked')</pre></td><td valign="top" width="97" >true</td><td valign="top" width="98" >false</td><td valign="top" width="86" > </td><td valign="top" width="105" >1.6才有此方法</td></tr><tr ><td valign="top" width="176" ><pre >.is(':checked')</pre></td><td valign="top" width="97" >true</td><td valign="top" width="105" >false</td><td valign="top" width="99" >true</td><td valign="top" width="130" >false</td></tr></tbody></table><code >elem.checked</code> <code >true</code>(Boolean) Will change with checkbox state<code >$(elem).prop("checked")</code> <code >true</code>(Boolean) Will change with checkbox state<code >elem.getAttribute("checked")</code> <code >"checked"</code>(String) Initial state of the checkbox; does not change<code >$(elem).attr("checked")</code>(1.6) <code >"checked"</code>(String) Initial state of the checkbox; does not change<code >$(elem).attr("checked")</code>(1.6.1+) <code >"checked"</code>(String) Will change with checkbox state<code >$(elem).attr("checked")</code>(pre-1.6) <code >true</code>(Boolean) Changed with checkbox state今天在用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined.解决这个文章我参考了这个帖子：<a href="http://bugs.jquery.com/ticket/9812" target="_blank" >http://bugs.jquery.com/ticket/9812</a>为什么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()的使用：<table><tbody ><tr class="firstRow"><th >Attribute/Property</th><th ><code >.attr()</code></th><th ><code >.prop()</code></th></tr><tr ><td >accesskey</td><td >√</td><td > </td></tr><tr ><td >align</td><td >√</td><td > </td></tr><tr ><td >async</td><td >√</td><td >√</td></tr><tr ><td >autofocus</td><td >√</td><td >√</td></tr><tr ><td >checked</td><td >√</td><td >√</td></tr><tr ><td >class</td><td >√</td><td > </td></tr><tr ><td >contenteditable</td><td >√</td><td > </td></tr><tr ><td >draggable</td><td >√</td><td > </td></tr><tr ><td >href</td><td >√</td><td > </td></tr><tr ><td >id</td><td >√</td><td > </td></tr><tr ><td >label</td><td >√</td><td > </td></tr><tr ><td >location ( i.e. window.location )</td><td >√</td><td >√</td></tr><tr ><td >multiple</td><td >√</td><td >√</td></tr><tr ><td >readOnly</td><td >√</td><td >√</td></tr><tr ><td >rel</td><td >√</td><td > </td></tr><tr ><td >selected</td><td >√</td><td >√</td></tr><tr ><td >src</td><td >√</td><td > </td></tr><tr ><td >tabindex</td><td >√</td><td > </td></tr><tr ><td >title</td><td >√</td><td > </td></tr><tr ><td >type</td><td >√</td><td > </td></tr><tr ><td >width ( if needed over<code >.width()</code>)</td><td >√</td><td > </td></tr></tbody></table>下文来自<a href="http://www.jquery.com/" >www.jquery.com</a>The difference betweenattributesandpropertiescan be important in specific situations.Before jQuery 1.6, the<code ><a href="http://api.jquery.com/attr/" >.attr()</a></code>method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior.As of jQuery 1.6, the<code >.prop()</code>method provides a way to explicitly retrieve property values, while<code >.attr()</code>retrieves attributes For example,<code >selectedIndex</code>,<code >tagName</code>,<code >nodeName</code>,<code >nodeType</code>,<code >ownerDocument</code>,<code >defaultChecked</code>, and<code >defaultSelected</code>should be retrieved and set with the<code >.prop()</code>method. Prior to jQuery 1.6, these properties were retrievable with the<code >.attr()</code>method, but this was not within the scope of<code >attr</code>. These do not have corresponding attributes and are only properties.<code >elem.checked</code> <code >true</code>(Boolean) Will change with checkbox state<code >$(elem).prop("checked")</code> <code >true</code>(Boolean) Will change with checkbox state<code >elem.getAttribute("checked")</code> <code >"checked"</code>(String) Initial state of the checkbox; does not change<code >$(elem).attr("checked")</code>(1.6) <code >"checked"</code>(String) Initial state of the checkbox; does not change<code >$(elem).attr("checked")</code>(1.6.1+) <code >"checked"</code>(String) Will change with checkbox state<code >$(elem).attr("checked")</code>(pre-1.6) <code >true</code>(Boolean) Changed with checkbox state<pre >原文:http://www.cnblogs.com/-run/archive/2011/11/16/2251569.html</pre><pre >1.6版情况：</pre><pre >//勾选后输出： //attr('checked'):checked //.prop('checked'):true //.is(':checked'):true //取消勾选输出： //.attr('checked'):undefined //.prop('checked'):false //.is(':checked'):false</pre> jquery1.4 版本： <a href="http://www.cnblogs.com/-run/archive/2011/11/16/" ><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif"/></a><pre >1<!DOCTYPEhtml> 2<html> 3<head> 4<style> 5p{margin:20px00} 6b{color:blue;} 7</style> 8<scriptsrc="../js/jquery-1.4.4.js"></script> 9</head> 10<body> 11 12<inputid="check1"type="checkbox"checked="checked"> 13<labelfor="check1">Checkme</label> 14 15 16<script> 17$("input").change(function(){ 18var$input=$(this); 19$("p").html(".attr('checked'):"+$input.attr('checked')+" " 20+".is(':checked'):"+$input.is(':checked'))+""; 21}).change(); 22</script> 23 24</body> 25</html></pre><a href="http://www.cnblogs.com/-run/archive/2011/11/16/" ><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif"/></a><pre >勾选后输出： //attr('checked'):true //.prop('checked')1.6后版本才有这个方法 //.is(':checked'):true 取消勾选输出： //.attr('checked'):false //.prop('checked')1.6后版本才有这个方法 //.is(':checked'):false</pre> 结论： attr('checked'): 在1.6后版本，所获取的值是 "checked"/"underfined" ，之前所获得的值是"false"/"true"。截然不同