使用JQUERY，何时单击复选框，选择全部

Question

查看以下图片。在其中，我有几个表，每个表都有一个checkBox，它作为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

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

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