Question

我有一个表格，我填写一些数据并且每个都有复选框，最后一个复选框是“ALL”。当我选中此“全部”复选框时，应选中剩余复选框，反之亦然。

填写数据的代码。

<div class="tablecontatiner">

<table>
                <tr>
                    <th>Function</th>
                    <th>Add</th>
                    <th>Edit</th>
                    <th>View</th>
                    <th>Delete</th>
                    <th>All</th>
                    </tr>
                @foreach (var item in Model)
                {
                <tr class="grouprow">
                    <td><input type="hidden"/><input id="@(item.Func_Code)" type="checkbox"  style="visibility:hidden" />@item.FunctionName</td>
                    <td><input id="@(item.Func_Code + "A")" type="checkbox" value="Add" @(item.Add==true?"checked":"") /></td>
                    <td><input id="@(item.Func_Code + "E")" type="checkbox" value="Edit" @(item.Edit==true?"checked":"") /></td>
                    <td><input id="@(item.Func_Code + "V")" type="checkbox" value="View" @(item.View==true?"checked":"")/></td>
                    <td><input id="@(item.Func_Code + "D")" type="checkbox" value="Delete" @(item.Delete==true?"checked":"")/></td>
                    <td><input id="@(item.Func_Code + "ALL")" type="checkbox" value="All"/></td>
                    </tr>
                }
 </table>
</div>

我的用户界面看起来像 this ：

Answer 1

试试这个

$('#checkboxAll').on('change', function () {
    $(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});
$('table tr input:checkbox:not("#checkboxAll")').on('change', function () {
    if (!this.checked) {
        $('#checkboxAll').prop('checked', false);
    }
});

DEMO

Answer 2

尝试

jQuery(function ($) {
    //listen to the change of checkbox in the last td
    $('.tablecontatiner td:last-child input').on('change', function () {
        //update the checked property of all checkboxes in the same row as the changed checkbox
        $(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', this.checked);
    })
})

Answer 3

尝试，

$（'＃chkAll'）。on（'click'，function（）{ $（this）.closest（'。grouprow'）。find（'：checkbox'）。not（this）.prop（'checked'，this.checked）; }）;

Answer 4

Anton的解决方案非常优雅。如果您加载（或重新加载）表并且不想在每次重新加载时设置事件处理程序，那么我会改变一点解决方案：

$('.tablecontatiner').on('change', '[id$=All]', function () {
    $(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});

备注：此外，我还会为每个“ ALL ”复选框提供“checkboxAll”类，因此它将如下所示：

<input id="@(item.Func_Code + "ALL")" type="checkbox" value="All" class="checkboxAll"/>

然后上面的代码将是：

$('.tablecontatiner').on('change', '.checkboxAll', function () {
    $(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});

http://jsbin.com/jetewayi/1/edit

如何选中一个复选框时选择全部

4 个答案: