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

<p >总结:</p><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(&#39;checked&#39;)</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(&#39;checked&#39;)</pre></td><td valign="top" width="97" >true</td><td valign="top" width="98" >false</td><td valign="top" width="86" ><br/></td><td valign="top" width="105" >1.6才有此方法</td></tr><tr ><td valign="top" width="176" ><pre >.is(&#39;:checked&#39;)</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><p ><code >elem.checked</code><br/><code >true</code>(Boolean) Will change with checkbox state</p><p ><code >$(elem).prop(&quot;checked&quot;)</code><br/><code >true</code>(Boolean) Will change with checkbox state</p><p ><code >elem.getAttribute(&quot;checked&quot;)</code><br/><code >&quot;checked&quot;</code>(String) Initial state of the checkbox; does not change</p><p ><code >$(elem).attr(&quot;checked&quot;)</code><em >(1.6)</em><br/><code >&quot;checked&quot;</code>(String) Initial state of the checkbox; does not change</p><p ><code >$(elem).attr(&quot;checked&quot;)</code><em >(1.6.1+)</em><br/><code >&quot;checked&quot;</code>(String) Will change with checkbox state</p><p ><code >$(elem).attr(&quot;checked&quot;)</code><em >(pre-1.6)</em><br/><code >true</code>(Boolean) Changed with checkbox state</p><p ></p><p ></p><p ><span ><span >今天在用JQuery的时候发现一个问题用.attr(&quot;checked&quot;)获取checkbox的checked属性时选中的时候可以取到值,值为&quot;checked&quot;但没选中获取值就是undefined.</span></span></p><p ><span ><span >解决这个文章我参考了这个帖子:</span></span></p><p ><a href="http://bugs.jquery.com/ticket/9812" target="_blank" ><span ><span >http://bugs.jquery.com/ticket/9812</span></span></a></p><p><span ><span >为什么jquery 1.6+增加了.prop()方法,因为在有些浏览器中比如说只要写disabled,checked就可以了,而有的要写成disabled = &quot;disabled&quot;,checked=&quot;checked&quot;。所以,从1.6开始,jq提供新的方法“prop”来获取这些属性。</span></span></p><p><span ><span >以前我们使用attr获取checked属性时返回&quot;checked&quot;和&quot;&quot;,现在使用prop方法获取属性则统一返回true和false。</span></span></p><p><span ><span >那么,什么时候使用attr,什么时候使用prop??</span></span></p><p><span ><span >1.添加属性名称该属性就会生效应该使用prop.</span></span></p><p><span ><span >2.是有true,false两个属性使用prop.</span></span></p><p><span ><span >3.其他则使用attr</span></span></p><p><span ><span >项目中jquery升级的时候大家要注意这点!</span></span></p><p><span ><span >以下是官方建议attr(),prop()的使用:</span></span></p><p><span ><span ></span></span></p><table><tbody ><tr class="firstRow"><th ><span ><span >Attribute/Property</span></span></th><th ><code ><span >.attr()</span></code></th><th ><code ><span >.prop()</span></code></th></tr><tr ><td ><span ><span >accesskey</span></span></td><td ><span ><span >√</span></span></td><td ><br/></td></tr><tr ><td ><span ><span >align</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >async</span></span></td><td ><span ><strong ><strong ><span ><span ><span >√</span></span></span></strong></strong></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td></tr><tr ><td ><span ><span >autofocus</span></span></td><td ><span ><strong ><strong ><span ><span ><span >√</span></span></span></strong></strong></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td></tr><tr ><td ><span ><span >checked</span></span></td><td ><span ><strong ><strong ><span ><span ><span >√</span></span></span></strong></strong></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td></tr><tr ><td ><span ><span >class</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >contenteditable</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >draggable</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >href</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >id</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >label</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >location ( i.e. window.location )</span></span></td><td ><span ><strong ><strong ><span ><span ><span >√</span></span></span></strong></strong></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td></tr><tr ><td ><span ><span >multiple</span></span></td><td ><span ><strong ><strong ><span ><span ><span >√</span></span></span></strong></strong></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td></tr><tr ><td ><span ><span >readOnly</span></span></td><td ><span ><strong ><strong ><span ><span ><span >√</span></span></span></strong></strong></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td></tr><tr ><td ><span ><span >rel</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >selected</span></span></td><td ><span ><span ><span >√</span></span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td></tr><tr ><td ><span ><span >src</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >tabindex</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >title</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span >type</span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr><tr ><td ><span ><span ><span >width ( if needed over</span></span><code ><span >.width()</span></code><span ><span >)</span></span></span></td><td ><span ><strong ><strong ><span ><span >√</span></span></strong></strong></span></td><td ><br/></td></tr></tbody></table><p ></p><p >下文来自<a href="http://www.jquery.com/" >www.jquery.com</a>The difference between<em >attributes</em>and<em >properties</em>can be important in specific situations.<strong >Before jQuery 1.6</strong>, 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.<strong >As of jQuery 1.6</strong>, 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.</p><p ><code >elem.checked</code><br/><code >true</code>(Boolean) Will change with checkbox state</p><p ><code >$(elem).prop(&quot;checked&quot;)</code><br/><code >true</code>(Boolean) Will change with checkbox state</p><p ><code >elem.getAttribute(&quot;checked&quot;)</code><br/><code >&quot;checked&quot;</code>(String) Initial state of the checkbox; does not change</p><p ><code >$(elem).attr(&quot;checked&quot;)</code><em >(1.6)</em><br/><code >&quot;checked&quot;</code>(String) Initial state of the checkbox; does not change</p><p ><code >$(elem).attr(&quot;checked&quot;)</code><em >(1.6.1+)</em><br/><code >&quot;checked&quot;</code>(String) Will change with checkbox state</p><p ><code >$(elem).attr(&quot;checked&quot;)</code><em >(pre-1.6)</em><br/><code >true</code>(Boolean) Changed with checkbox state</p><pre >原文:http://www.cnblogs.com/-run/archive/2011/11/16/2251569.html</pre><pre >1.6版情况:</pre><pre >//勾选后输出: //attr(&#39;checked&#39;):checked //.prop(&#39;checked&#39;):true //.is(&#39;:checked&#39;):true //取消勾选输出: //.attr(&#39;checked&#39;):undefined //.prop(&#39;checked&#39;):false //.is(&#39;:checked&#39;):false</pre><p ><strong ><br/>jquery1.4 版本:<br/></strong></p><p ><a href="http://www.cnblogs.com/-run/archive/2011/11/16/" ><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif"/></a></p><pre >1&lt;!DOCTYPEhtml&gt; 2&lt;html&gt; 3&lt;head&gt; 4&lt;style&gt; 5p{margin:20px00} 6b{color:blue;} 7&lt;/style&gt; 8&lt;scriptsrc=&quot;../js/jquery-1.4.4.js&quot;&gt;&lt;/script&gt; 9&lt;/head&gt; 10&lt;body&gt; 11 12&lt;inputid=&quot;check1&quot;type=&quot;checkbox&quot;checked=&quot;checked&quot;&gt; 13&lt;labelfor=&quot;check1&quot;&gt;Checkme&lt;/label&gt; 14&lt;p&gt;&lt;/p&gt; 15 16&lt;script&gt; 17$(&quot;input&quot;).change(function(){ 18var$input=$(this); 19$(&quot;p&quot;).html(&quot;.attr(&#39;checked&#39;):&lt;b&gt;&quot;+$input.attr(&#39;checked&#39;)+&quot;&lt;/b&gt;&lt;br&gt;&quot; 20+&quot;.is(&#39;:checked&#39;):&lt;b&gt;&quot;+$input.is(&#39;:checked&#39;))+&quot;&lt;/b&gt;&quot;; 21}).change(); 22&lt;/script&gt; 23 24&lt;/body&gt; 25&lt;/html&gt;</pre><p ><a href="http://www.cnblogs.com/-run/archive/2011/11/16/" ><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif"/></a></p><pre >勾选后输出: //attr(&#39;checked&#39;):true //.prop(&#39;checked&#39;)1.6后版本才有这个方法 //.is(&#39;:checked&#39;):true 取消勾选输出: //.attr(&#39;checked&#39;):false //.prop(&#39;checked&#39;)1.6后版本才有这个方法 //.is(&#39;:checked&#39;):false</pre><p ><strong ><br/></strong></p><p ><strong ><br/></strong></p><p ><strong >结论: attr(&#39;checked&#39;): 在1.6后版本,所获取的值是 &quot;checked&quot;/&quot;underfined&quot; ,之前所获得的值是&quot;false&quot;/&quot;true&quot;。截然不同</strong></p>
RangeTime:0.007204s
RangeMem:215.63 KB
返回顶部 留言