Selecting child table's row upon selecting parent table's row using Jquery

Question

I am new to jquery and learning the things one by one.

I have a few main tables and nested tables inside those main tables. Each and every row of the parent table and child table has a check box for every row. Now, of and when the parent table's checkbox is selected, the check box of each and every row of child table/nested table should be selected.

I have used the following code to register the event:

$(function () {
    $("input[type='checkbox']").change(function () {
    $(this).siblings('tr')
        .find("input[type='checkbox']")
        .prop('checked', this.checked);


    });
});

But the above code is not working as expected. I am not able to traverse to the child table properly.

For illustration purposes, I have created a fiddle with one parent table and one child table.

 $(function() { $("input[type='checkbox']").change(function() { $(this).siblings('tr') .find("input[type='checkbox']") .prop('checked', this.checked); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div id="divSAcheckBox" style="display: inline; left: 37px; position: relative;"><input id="SAcheckBox" name="SAcheckBox" type="checkbox" /> Select All</div> <table id="parentTable" class="display dataTable no-footer" style="position: relative; top: 0px; width: 911px; table-layout: fixed;" role="grid"> <thead> <tr style="height: 0px;" role="row"> <th class="sorting_disabled" style="width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">&nbsp;</th> <th id="chkbox" class="sorting_disabled" style="width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Select <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Select</div> </th> <th id="media" class="sorting" style="border-left: 1px dashed #111111; text-align: left; width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Media <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Media</div> </th> </tr> </thead> <tbody> <tr class="odd shown" role="row" align="left"> <td class="sorting_1"><input style="cursor: pointer;" type="checkbox" align="center" /></td> <td class="details-control" style="width: 51px;">&nbsp;</td> <td style="width: 51px;">Phone</td> <td style="width: 90px;" colspan="9"> <table id="issuetable_12_13_2018_13_23_34" class="stripe nowrap" style="position: relative; margin: 5px 0 0 30px; cellspacing=0; border-collapse: collapse; align-text: left; top: 0px; width: 95%;"> <thead> <tr> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> </tr> <tr> <th style="border: 1px solid #333333; text-align: left; width: 333px;" nowrap="nowrap" bgcolor="#FAF6F2">Select</th> <th style="border: 1px solid #333333; text-align: left; width: 407px;" nowrap="nowrap" bgcolor="#FAF6F2">Priority</th> </tr> </thead> <tbody> <tr align="left"> <td style="width: 333px;" nowrap="nowrap"><input style="cursor: pointer;" type="checkbox" align="center" />&nbsp;</td> <td style="width: 407px;" nowrap="nowrap">999</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> 

JSfddle

Any help is much appreciated.

Answer 1

Current element is checkbox so it can't have TR as siblings use .closest() to traverse up to parent TR element then perform the desired DOM traversal methods ie .siblings() , .find() to target the desired elements

$(this).closest('tr').find(...)
$(this).closest('tr').siblings('tr').find(...)

 $(function() { $("input[type='checkbox']").change(function() { $(this).closest('tr') .find("input[type='checkbox']") .prop('checked', this.checked); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div id="divSAcheckBox" style="display: inline; left: 37px; position: relative;"><input id="SAcheckBox" name="SAcheckBox" type="checkbox" /> Select All</div> <table id="parentTable" class="display dataTable no-footer" style="position: relative; top: 0px; width: 911px; table-layout: fixed;" role="grid"> <thead> <tr style="height: 0px;" role="row"> <th class="sorting_disabled" style="width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">&nbsp;</th> <th id="chkbox" class="sorting_disabled" style="width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Select <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Select</div> </th> <th id="media" class="sorting" style="border-left: 1px dashed #111111; text-align: left; width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Media <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Media</div> </th> </tr> </thead> <tbody> <tr class="odd shown" role="row" align="left"> <td class="sorting_1"><input style="cursor: pointer;" type="checkbox" align="center" /></td> <td class="details-control" style="width: 51px;">&nbsp;</td> <td style="width: 51px;">Phone</td> <td style="width: 90px;" colspan="9"> <table id="issuetable_12_13_2018_13_23_34" class="stripe nowrap" style="position: relative; margin: 5px 0 0 30px; cellspacing=0; border-collapse: collapse; align-text: left; top: 0px; width: 95%;"> <thead> <tr> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> </tr> <tr> <th style="border: 1px solid #333333; text-align: left; width: 333px;" nowrap="nowrap" bgcolor="#FAF6F2">Select</th> <th style="border: 1px solid #333333; text-align: left; width: 407px;" nowrap="nowrap" bgcolor="#FAF6F2">Priority</th> </tr> </thead> <tbody> <tr align="left"> <td style="width: 333px;" nowrap="nowrap"><input style="cursor: pointer;" type="checkbox" align="center" />&nbsp;</td> <td style="width: 407px;" nowrap="nowrap">999</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>