如何做选择全选复选框 [英] how to do select all when selected a checkbox

问题描述

我有一个表，其中我填充一些数据，除了每个复选框，最后一个复选框是所有。
当我选中ALL复选框时，应选中复选框，反之亦然。

i have a table where i am filling some data and have checkboxes besides each and the last check box is "ALL". When i check this "ALL" checkbox remaining check boxes should be checked and vice versa.

填充数据的代码。

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

，我的UI看起来像：

推荐答案

尝试此

$('#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

这篇关于如何做选择全选复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！