JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<buton id="reset">reset</buton>
<table>
  <tr>
    <td><input type="checkbox"></td>
    <td>coucou</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>coucou</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>coucou</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>coucou</td>
  </tr>
</table>

CSS

.checked {
  background:pink;
}

JavaScript

var checboxes = document.querySelectorAll('input[type=checkbox]');

checboxes.forEach(function (el) {
  el.addEventListener("click", function () {
    setStyle(el);
  }, false);
});

function setStyle(el) {
	el.closest('tr').classList.toggle('checked');
}

var reset = document.getElementById('reset');
reset.addEventListener("click", uncheckAll, false);

function uncheckAll() {
  var allselected = document.querySelectorAll('input:checked');
  allselected.forEach(e => {
    e.checked = false;
    setStyle(e);
  });
}