Información: quiero hacer una tabla con una fila principal y una fila secundaria. si la fila principal está marcada, las filas secundarias también se verifican hasta que la siguiente fila principal no salga
Cómo marcar la casilla de verificación de todas las filas secundarias de la fila principal si la fila principal está marcada hasta que se marque la nueva fila principal.
<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'); } }); $('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>Te doy un ejemplo para tu referencia.
$('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>