Razor、HTML、jQuery：如何选中/取消选中所有复选框？

Question

我在 Razor 和 HTML 中有以下代码：

    @:<td>   
           <input class="privcheck"
              type="checkbox"
              name="selectedPrivileges"
              value="@priv.PrivilegeID"
             @(Html.Raw(priv.Assigned ? "checked=\"checked\"" : "")) />
           @priv.PrivilegeName

    @:</td>

<button id="checkallprivs">
   Select All
</button>

<button id="uncheckallprivs">
    Deselect All
</button>

还有下面的jquery：

$("#checkallprivs").button();
$("#uncheckallprivs").button();

$(document).on("click", "#checkallprivs", function (event) {
                    event.preventDefault();
                    $('.privcheck:checkbox').attr('checked', 'checked');

                });

$(document).on("click", "#uncheckallprivs", function (event) {
                    event.preventDefault();
                    $('.privcheck:checkbox').removeAttr('checked');
                });

当我单击“全选”按钮时，它会选中所有复选框。之后，如果我单击“取消全选”，它将取消选中所有复选框。然而问题是，一旦我单击取消选择按钮，单击时全选按钮不会执行任何操作。如何获得预期的行为？

谢谢。

Answer 1

我建议使用prop() 而不是attr()

$(document).on("click", "#checkallprivs", function (event) {
    event.preventDefault();
    $('.privcheck:checkbox').prop('checked', true);

});

$(document).on("click", "#uncheckallprivs", function (event) {
    event.preventDefault();
    $('.privcheck:checkbox').prop('checked', false);
});