jquery利用attr、prop方法获取、设置input的checked属性

原创已于 2023-11-09 21:32:05 修改 · 5.1w 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #input #prop #attr #checked

于 2016-07-23 00:16:00 首次发布

前端内容专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在jQuery中如何正确使用prop方法获取和设置checkbox的checked属性，并对比了attr方法的效果。针对不同版本的jQuery，prop方法的表现更为一致可靠。

在jquery中应该使用prop方法来获取和设置checked属性，不应该使用attr,需要的朋友可以参考下。

1、prop方法获取、设置checked属性

<input type="checkbox" name="checkboxMain" onclick="CheckAll(this);" />
function CheckAll(obj) {
   //获取checked属性
   if ($(obj).prop("checked")) {
      //设置checked属性
      $("input[name='checkboxall']").prop("checked", true);
   } else {
      //设置checked属性
      $("input[name='checkboxall']").prop("checked",false);                                
   }
}

当input控件checkbox设置了checked属性时，无论checked=""或
checked=“checked”， $* * (o bj) . p ro p (" c h ec k e d ") 的结果都是 t r u e ；当 in p u t 控件 c h ec kb o x 没设置 c h ec k e d 属性时， * *$ (obj).prop(“checked”)的结果是false。
设置** $* * (" in p u t [nam e =^{'} c h ec kb o x a l l^{'}] ") . p ro p (" c h ec k e d ", t r u e) 时， c h ec kb o x 会被选中；设置 * *$ **(“input[name=‘checkboxall’]”).prop(“checked”, false)时，checkbox不会被选中；

2、attr方法获取、设置checked属性

<input type="checkbox" id="selectAll" onclick="checkAll()" >全选
如果当前input中初始化未定义checked属性，则不管当前是否选中， $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲selectAll").att\dots$ **(“#selectAll”).attr(“checked”)都会返回"checked"；

3、总结

在jquery中应该使用prop方法来获取和设置checked属性，不应该使用attr。
这篇文章写得较早，之后我又写了一篇文章来解释jQuery中prop和attr的区别，如果大家有需要的话请移步
http://blog.youkuaiyun.com/xiaouncle/article/details/53959496。

4、jquery版本原因

jquery-1.4.1.min.js、jquery-1.4.2.min.js可以用attr方法正确地获取或设置checkbox的checked属性，但是高版本例如：1.10.2.min.js就不能用attr方法正确地获取或设置checkbox的checked属性，在此声明：其他版本没有测试。
jquery-1.4.1.min.js文件下载地址：http://download.youkuaiyun.com/detail/xiaouncle/9585180
jquery-1.4.2.min.js文件下载地址：http://download.youkuaiyun.com/detail/xiaouncle/9585205