jQuery 的 prop 与 attr

前几天在修改一个 js function 的时候，想要实现对40个单选组的批量“是”/“否”状态的切换，但是发现使用 jQuery 的 attr() 对 “checked” 进行操作无法达到目标，着实懵逼了一把，后来了解到 jQuery 1.6 新添加了一个 prop() 方法，两行代码搞定！在这里记录一下学到的 attr() 与 prop() 的区别。

结合自己遇到的情况，说一下 input 的 checked 属性。

<table id="table">
    <tr>
        <td>test1:</td>
        <td>
        <input type="radio" value="0" name="a1" checked="checked">否
                      
        <input type="radio" value="1" name="a1">是
        </td>
    </tr>
    <tr>
        <td>test2:</td>
        <td>
            <input type="radio" value="0" name="a2" checked="checked">否
                      
            <input type="radio" value="1" name="a2">是
        </td>
    </tr>
</table>

关于 checked attribute 需要记住的最重要的一点是：它和 checked property 并不是一致的。实际上这个 attribute 和 defaultChecked property 一致，而且只应该用来设置 checkbox 的初始值。checked attribute 并不随着 checkedbox 的状态而改变，但是 checked property 却跟着变。

解决问题的一个最常见的办法就是——debug 代码——如果认真去这么做了，应该会发现，如果使用 attr("checked", "checked") 修改所有 value="1" 的选项，那么修改的其实就是上面说的 defaultChecked 属性，并没有修改 checked 属性，这就导致了无法实现需求，而如果使用 prop 方法则能轻易的达到目的。

作为一个前端小白菜，就不深入讨论这两个方法底层实现的区别了，简单说，attr() 是对 HTML 字面意思的获取/设置，而 prop() 是对 JS 对象的计算结果的获取/设置，比如上面的 checked="checked"，attr("checked") 获取的应该是 "checked"，而 prop("checked") 获取的应该是 true.