How to highlight a table row when a checkbox is selected in a cell?

Question

JavaScript

There is a table like this:

<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">
<div><input class="form-check-input" type="checkbox" value="" /></div>
</td>
</tr>
<tr>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">
<div><input class="form-check-input" type="checkbox" value="" /></div>
</td>
</tr>
<tr>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">&nbsp;</td>
<td style="width: 20%;">
<div><input class="form-check-input" type="checkbox" value="" /></div>
</td>
</tr>
</tbody>
</table>

How to make it so that when the checkbox is checked, the table row tr is highlighted?

Answer 1

document.querySelector('table').addEventListener('change', ({ target: t }) => {
  t.closest('tr').classList.toggle('класс, стилизующий строку с отмеченным чекбоксом', t.checked);
});