JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<!doctype html>
<html>

  <body>
    <p>Choose your vechicle:</p>
    <div>
      <input type="checkbox" id="bike" name="vechicle" value="bike" checked>
      <label for="bike">Bike</label>
    </div>
    <div>
      <input type="checkbox" id="scooter" name="vechicle" value="scooter" checked>
      <label for="scooter">Scooter</label>
    </div>
    <div>
      <input type="checkbox" id="car" name="vechicle" value="car">
      <label for="car">Car</label>
    </div>
    <div>
      <input type="checkbox" id="auto" name="vechicle" value="auto">
      <label for="auto">Auto</label>
    </div>
    <div>
      <button id="toggle">Toggle All</button>
    </div>
    <br>
  </body>

</html>

CSS

p,
label {
  font: 15px 'Exo 2', sans-serif;
}

input {
  margin: 6px;
}

button {
  margin-top: 10px;
  padding: 2 2;
  font: 15px 'Exo 2', sans-serif;
}

JavaScript

document.getElementById('toggle').onclick = function() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  for (var checkbox of checkboxes) {
    checkbox.checked = !checkbox.checked;
  }
}