Как выделить строку таблицы при выборе чекбокса в ячейке?

Question

[Василий Иванов]

Есть таблица вида:

<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>

Как сделать, чтобы при установлении флажка выделялась строка таблицы?

Answer 1

[0xD34F]

.active {
  background: red;
}

document.querySelector('table').addEventListener('change', ({ target: t }) => {
  t.closest('tr').classList.toggle('active', t.checked);
});

// или

document.querySelectorAll('table tr').forEach(function(n) {
  n.addEventListener('change', this);
}, e => e.currentTarget.classList.toggle('active', e.target.checked));

UPD. Наконец-то дождались, js теперь тут не нужен:

tr:has(.form-check-input:checked) {
  background: red;
}

Answer 2

[Дима Паутов]

https://jsfiddle.net/rnq1sfg3/