jQuery 设置 checkbox 单选/复选框，attr 不可行，prop 才是正确答案

版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。觉得此文有用的，不嫌麻烦的，就留个言呐，或者点个赞呐，要是嫌麻烦呢，也麻烦点个赞嘛 https://blog.csdn.net/qq_40147863/article/details/86324496

jQuery 设置 checkbox 单选/复选框，attr 不可行，prop 才是正确答案

今天通过百度查到一些用 jQuery 设置 checkbox 的方法，绝大部分都是用 attr，但是胡出现离奇的 BUG，脑壳儿疼：

第一次可以正确选中，但是第二次，和上一次一样，不会再更新。刷新后，第一次还是正确。

解决方案：

使用 prop 不使用 attr ！

用代码解释：

//判断 checkbox 是否被选中  
if($(this).is(":checked")){  
    alert('选中');  
}  
else{  
    alert('未选中');  
}  

//通过 id 修改选中的选项
$("#emp_sex2").prop("checked", true);

//用 jquery 全选所有 class 为 listbox 的 checkbox  
$(".listbox").prop("checked", true);  
   
//用 jquery 取消所有 class 为 listbox 的 checkbox 的选中  
$(".listbox").prop("checked", false);  

jQuery 中 attr 和 prop 方法的区别

prop 是 jquery1.6 新增的方法，其与 attr 的用法极为相似。由于不理解他们的根本区别，难免产生离奇的 BUG。

通过分析 attr 和 prop 的源码，得知：

attr 方法里面，最关键的两行代码，elem.setAttribute( name, value + “” ) 和 ret = elem.getAttribute( name )，很明显的看出来，使用的 DOM 的 API setAttribute 和 getAttribute 方法操作的属性元素节点。

而 prop 方法里面，最关键的两行代码，return ( elem[ name ] = value ) 和 return elem[ name ]，你可以理解成这样 document.getElementById(el)[name] = value，这是转化成 JS 对象的一个属性。