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