How to make child tr input checkbox value true in html table using jquery?

June 30, 2022

Info: I want to make a table with parent row and child row. if the parent row is checked then the child rows make also checked until next parent row is not exits

How to checkbox checked of all child row of parent row if parent row is checked until new parent row is.

<table>
    <tbody>
        <!-- parent -->
        <tr id="parent-tr">
            <td><input type="checkbox" name="subject" id="subject"></td>
            <td colspan="3"></td>
        </tr>
        <!-- child -->
        <tr id="child-tr">
            <td><input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr id="child-tr">
            <td><input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr id="child-tr">
            <td><input type="checkbox" name="ticker" id="ticker"></td>
        </tr>

        <!-- parent -->
        <tr id="parent-tr">
            <td><input type="checkbox" name="subject" id="subject"></td>
            <td colspan="3"></td>
        </tr>
        <!-- child -->
        <tr id="child-tr">
            <td><input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr id="child-tr">
            <td><input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr id="child-tr">
            <td><input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
    </tbody>

</table>

Jquery.js

 $('tbody tr#parent-hr').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {

    var currentRow = $(this).closest('tr#parent-hr');
    var targetedRow = currentRow.nextAll('tr#child-hr');

    var targetedCheckbox = targetedRow.find(':checkbox');
    targetedCheckbox.prop('checked', true).trigger('change');
   }
 });

>Solution :

I give you an example for your reference.

 $('tbody tr.parent-tr').on('change', ':checkbox', function () {
    let tbody=$(this).parents("tbody");
    tbody.children("tr.child-tr").find(":checkbox").attr('checked', $(this).is(':checked'));
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <!-- parent -->
        <tr class="parent-tr">
            <td>Parent 1<input type="checkbox" name="subject" id="subject"></td>
            <td colspan="3"></td>
        </tr>
        <!-- child -->
        <tr class="child-tr">
            <td>Child of Parent 1<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr class="child-tr">
            <td>Child of Parent 1<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr class="child-tr">
            <td>Child of Parent 1<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
    </tbody>
    <tbody>
        <!-- parent -->
        <tr class="parent-tr">
            <td>Parent 2<input type="checkbox" name="subject" id="subject"></td>
            <td colspan="3"></td>
        </tr>
        <!-- child -->
        <tr class="child-tr">
            <td>Child of Parent 2<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr class="child-tr">
            <td>Child of Parent 2<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr class="child-tr">
            <td>Child of Parent 2<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
    </tbody>
</table>