Question

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

我正在尝试为这两个表添加Check All / Uncheck All功能。

以下是两个复选框：

<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是counterTable 以下是我的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表示第二个表格。

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

1 个答案: