jquery 获取input checkbox checked属性

灰太狼 2024-04-20 08:35 73阅读 0赞

如果使用jquery,应使用prop方法来获取和设置checked属性

1.通过prop方法获取checked属性，获取的checked返回值为boolean，选中为true,否则为flase

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>&lt;input type=</code><code>"checkbox"</code>&nbsp;<code>id=</code><code>"selectAll"</code>&nbsp;<code>onclick=</code><code>"checkAll()"</code><code>&gt;全选</code> <code>function checkAll()</code> <code>{ </code> <code>var</code>&nbsp;<code>checkedOfAll=$(</code><code>"#selectAll"</code><code>).prop(</code><code>"checked"</code><code>);</code> <code>alert(checkedOfAll);</code> <code>$(</code><code>"input[name='procheck']"</code><code>).prop(</code><code>"checked"</code><code>, checkedOfAll);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

2.如果使用attr方法获取时，如果当前input中初始化未定义checked属性，则不管当前是否选中，$("\#selectAll").attr("checked")都会返回undefined；

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;input type=</code><code>"checkbox"</code>&nbsp;<code>id=</code><code>"selectAll"</code>&nbsp;<code>onclick=</code><code>"checkAll()"</code>&nbsp;<code>&gt;全选</code> </td> 
 </tr> 
 </tbody> 
</table>

3.如果当前input中初始化已定义checked属性，则不管是否选中，$("\#selectAll").attr("checked")都会返回checked.

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>&lt;input type=</code><code>"checkbox"</code>&nbsp;<code>id=</code><code>"selectAll"</code>&nbsp;<code>onclick=</code><code>"checkAll()"</code>&nbsp;<code>checked</code><code>&gt;全选</code> <code>function checkAll()</code> <code>{ </code> <code>var</code>&nbsp;<code>checkedOfAll=$(</code><code>"#selectAll"</code><code>).attr(</code><code>"checked"</code><code>);</code> <code>alert(checkedOfAll);</code> <code>$(</code><code>"input[name='procheck']"</code><code>).attr(</code><code>"checked"</code><code>, checkedOfAll);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

总结，如果使用jquery,应使用prop方法来获取和设置checked属性，不应使用attr.