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

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');
   }
 });

CodePudding user response：

 $('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');
   }
 });
 
 const parentInputs = $('#parent-tr input')
 
 
 const checkChildRows = (parentInput, isChecked) => {
   const parentRow = parentInput.closest('#parent-tr');
   let childRow = parentRow.nextElementSibling
   
   while(childRow && !(childRow.id === 'parent-tr')) {
     console.log('run')
     childRow.querySelector('input').checked = isChecked
     childRow = childRow.nextElementSibling;
   }
 }
 
 [...parentInputs].forEach(input => input.addEventListener('change', (event) => {
  checkChildRows(input, event.target.checked)
 }))

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

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

</table>

CodePudding user response：

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 >
            <td>Parent 1<input type="checkbox" name="subject" id="subject"></td>
            <td colspan="3"></td>
        </tr>
        <!-- child -->
        <tr >
            <td>Child of Parent 1<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr >
            <td>Child of Parent 1<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr >
            <td>Child of Parent 1<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
    </tbody>
    <tbody>
        <!-- parent -->
        <tr >
            <td>Parent 2<input type="checkbox" name="subject" id="subject"></td>
            <td colspan="3"></td>
        </tr>
        <!-- child -->
        <tr >
            <td>Child of Parent 2<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr >
            <td>Child of Parent 2<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
        <tr >
            <td>Child of Parent 2<input type="checkbox" name="ticker" id="ticker"></td>
        </tr>
    </tbody>
</table>