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);

Demo

有关更多信息，请参阅 $.prop - Attributed vs Properties

具体:

...the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does.