Question

我有一个包含五个复选框的表（添加，编辑，查看，删除，全部）。这些表行是动态生成的。代码如下：

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

我正在尝试解决我的最后一个复选框（全部）。我的要求是，当我选中“全部”复选框时，应选中其余复选框，当我取消选中“全部”复选框时，应取消选中其余复选框。

我正在使用以下Jquery。

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

    //var checkedBoxes = $(this).closest('.grouprow').find('input:checkbox:not(".CheckAll"):checked');
    //if (checkedBoxes.length == 4) {
    //    $('.CheckAll').prop('checked', true);
    //}
});
</script>

一切正常，但当我在选中所有剩余行复选框时取消选中任意一行中的任何一个复选框时，将取消选中所有行的“全部”复选框。有什么帮助吗？

Answer 1

像这样更改代码

 $(document).ready(function () {
        $('.CheckAll').on('change', function () {
            $(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
        });
        $('table tr input:checkbox:not(".CheckAll")').on('change', function () {

            if (!this.checked) {
                $(this).parent().parent().find('.CheckAll').prop('checked', false);
            }

        });
    });

因为您取消选中所有具有“CheckAll”类的chackbox。此代码将仅取消选中最近的复选框。

fiddle

更新fiddle

Answer 2

我认为你应该查看长度：

if ($('.grouprow').find(':checked').length != $('.grouprow').find(':checkbox').length) {
    $('.CheckAll').prop('checked', false);
}

如何在JQuery中选中一个复选框时使用checkall

2 个答案: