05、radio 使用 attr() 添加 checked 第二次点击全选单选项失效

问题描述：

radio 使用 attr() 添加 checked 第二次点击全选。其它单选项并不能全部选中。第一次，点击则可以全部选中。

 

代码：

     
     


     
     



    
    全选

 

原因：

怀疑是使用 attr 设置 checked 原因。改成 this_.prop('checked', true); 就没有问题了。那么，attr()和prop()有什么区别呢？

attr 与prop从中文意思看，两者分别是获取/设置 attributes 和 properties 的方法。

那么，什么时候使用attr()，什么时候使用prop()？

官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

 

解决方案：

把 attr() 改成 prop()即可。

资料参考于：

https://www.cnblogs.com/lizi-cat/p/10811743.html

https://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html

 

代码重构 把 type="radio" 修改 type="checkbox"：

     
     


     
     



    
    全选