jQuery - Check All / Uncheck All checkboxes of 2 different tables

Question

On the view of my ASP.NET MVC 5 Application, I have two tables, Each row in the tables has a checkbox which is dynamically generated.

I am trying to add Check All / Uncheck All functionality for both the tables.

Following are two checkboxes:

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

Following is the relevant HTML Code:

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

The Structure of both the table is same and ID of second one is countersTable Following is my 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);
        }
    });

When I click on either of the Select / Unselect All checkbox, the checkboxes from both the tables get Checked / Unchecked.

How Can I restrict this to respective tables?

Thanks In Advance

Answer 1

I assume that you select the wrong element when calling $.parent().parent(). If you grab an element that both tables are children of, all input[type="checkbox"] will be selected, obviously.

Since you have different classes for both checkboxes, try to instead of selecting by $.parent().parent(), just using the # id selector for the relevant table.

I.e. change this:

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

to

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

for the first table, and with #counterTable for the second one.