JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.active {
	background: #000;
}

JavaScript

const checkboxes = Array.from(document.querySelectorAll('.form-check-input'));

checkboxes.forEach(checkbox => {
	checkbox.addEventListener('change', function () {
		const isChecked = this.checked;
		const parentTableRow = this.closest('tr');
		
		if (isChecked) {
			parentTableRow.classList.add('active');
		} else {
			parentTableRow.classList.remove('active');
		}
	});
});