javascript - 使用 JQUERY，当单击复选框时，全选

Question

看下图。在其中，我有几个表，每个表中都有一个复选框，它作为 SelectAll 工作（它尚未实现，必须选择其余的复选框。

这是包含我的剃刀视图的代码。

for (int i = 0; i < Model.Classes.Count; i++) {
<span>@Model.Classes[i].Name</span>
<table class="monitor-class-table">
    <tr>
        <th>
            @Html.CheckBox("selectAll-" + Model.Classes[0].ClassId)
        </th>
        <th>
            Online
        </th>
    </tr>

@for (int j = 0; j < Model.Classes[i].Students.Count; j++) {
    <tr>
        @Html.HiddenFor(model => ...)
        <td>
            @Html.CheckBoxFor(model => model.Classes[i].Students[j].Share)
        </td>
        <td>
            @Html.LabelFor(model => ...)
        </td>
    </tr>
}
</table>

我不太清楚如何开始使用 JQUERY（我想是最好的选择）。选中和取消选中复选框。

Answer 1

例如，您可以这样做：

$('.select-all').change(function() {
    $('.check').prop('checked', this.checked);
});

这是基本的演示实现http://jsfiddle.net/dfsq/YtMuh/

如果您手动检查所有行，您还可以.select-all自动检查该复选框（或者如果未选择至少一行，则取消选中）：http: //jsfiddle.net/dfsq/YtMuh/2/

Answer 2

我不熟悉 Razor 的渲染方式，所以这可能不是复制和粘贴，但这应该可以帮助您入门：

$('.selectAllCheckbox').on('change', function(ev) { 
    //assumes all of your "line item" checkboxes share a common class
    //this could easily be replaced with another selector "#mytable [type=checkbox]", etc
    $('.myLineItemCheckboxes').attr('checked', $(this).is(':checked'));
});

说了这么多，请阅读对您问题的评论....那里有一些很好的建议

Answer 3

您可以通过两种方式解决此问题。首先，您可以在这里查看此人的解决方案：http: //briancray.com/posts/check-all-jquery-javascript

另一种方法是为每个复选框设置相同的类，如果选中“全部”框，则使用 jquery 将选中的属性设置为 true。

$('.allchecked').attr('checked', true);