jquery - 未显示全选时的 HTML 复选框

Question

<table class="list" id="example">
    <thead>
        <tr>
            <td class="first" width="1" style="text-align: center;"><input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);"></td>
            <td class="left">
                Username
            </td>
            <td class="left">
                Status
            </td>
            <td class="left">
                Date Added
            </td>
            <td class="right">
                Action
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align: center;"><input type="checkbox" name="selected[]" value="2">
            </td>
            <td class="left">testing</td>
            <td class="left">Enabled</td>
            <td class="left">31/08/2013</td>
            <td class="right"> [ <a href="">Edit</a> ]</td>
        </tr>
        <tr>
            <td style="text-align: center;"><input type="checkbox" name="selected[]" value="1">
            </td>
            <td class="left">admin</td>
            <td class="left">Enabled</td>
            <td class="left">31/03/2013</td>
            <td class="right">[ <a href="">Edit</a> ]</td>
        </tr>
    </tbody>
</table>

我有一个复选框，单击时会选择所有其他复选框，第一次单击全选，其他复选框将选中显示的勾号。但是当取消选中全选并再次选择它时，其他复选框没有显示勾号，但是当查看源代码时，checked="checked" 确实显示

Answer 1

这不是很明显，但原始代码嵌入在上面的标记中。

注意使用$(…)

<input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);">

改变：

.attr('checked', this.checked);

至：

.prop('checked', this.checked);

演示

有关更多信息，请参阅$.prop - 属性与属性

具体来说：

...关于 checked 属性要记住的最重要的概念是它不对应于 checked 属性。该属性实际上对应于 defaultChecked 属性，应该只用于设置复选框的初始值。选中的属性值不会随着复选框的状态而改变，而选中的属性会。