javascript - jQuery - 选中全部/取消选中 2 个不同表的所有复选框

Question

在我的 ASP.NET MVC 5 应用程序的 View 中，我有两个表，表中的每一行都有一个动态生成的复选框。

我正在尝试为两个表添加“全选”/“取消全选”功能。

以下是两个复选框:

<input id="ALL" class="CheckAll" type="checkbox" value="All" /><b>Select / Unselect All</b>

<input id="ALLt2" class="CheckAllt2" type="checkbox" value="All" /><b>Select / Unselect All</b>

以下是相关的 HTML 代码:

<table class="table" id="hostsTable">
                        <thead>
                            <tr>
                                <th>FQ</th>
                                <th>Name</th>
                                <th>Select?</th>
                            </tr>
                        </thead>
                            <tr>
                                <td>
                                    VISIBLE FQ VALUE

                                </td>
                                <td>
                                    VISIBLE NAME
                                </td>
                                <td>
                                    <input Style="vertical-align:3px}" data-val="true" data-val-required="The Checked field is required." id="Hosts_0__Checked" name="Hosts[0].Checked" type="checkbox" value="true" /><input name="Hosts[0].Checked" type="hidden" value="false" />
                                </td>
                            </tr>


                    </table>

两个表的结构相同，第二个表的 ID 是 countersTable以下是我的 jQuery:

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

        if (!this.checked) {
            $(this).parent().parent().find('.CheckAll').prop('checked', false);
        }
        var flag = true;
        $(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAll)').each(function () {
            if (!this.checked) {
                flag = false;
            }
        });
        if (flag) {
            $(this).parent().parent().find('.CheckAll').prop('checked', true);
        }
    });


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

        if (!this.checked) {
            $(this).parent().parent().find('.CheckAllt2').prop('checked', false);
        }
        var flag = true;
        $(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAllt2)').each(function () {
            if (!this.checked) {
                flag = false;
            }
        });
        if (flag) {
            $(this).parent().parent().find('.CheckAllt2').prop('checked', true);
        }
    });

当我单击“全选”/“取消全选”复选框时，两个表中的复选框都会被选中/取消选中。

如何将其限制到相应的表？

提前致谢

Answer 1

我假设您在调用$.parent().parent()时选择了错误的元素。如果您获取两个表都是子元素的元素，则显然所有 input[type="checkbox"] 都将被选中。

由于两个复选框有不同的类，因此请尝试不要通过 $.parent().parent() 选择，而只需使用 # id 选择器相关表格。

即更改此:

 $(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);

到

 $("#hostsTable").find('input[type=checkbox]').prop('checked', this.checked);

用于第一个表，#counterTable 用于第二个表。