JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<!doctype html>
<html>
  <body>
    <p>Gender:</p>
    <div>
      <input type="checkbox" id="male" name="gender" value="male">
      <label for="male">Male</label>
    </div>
    <div>
      <input type="checkbox" id="female" name="gender" value="female">
      <label for="female">Female</label>
    </div>
    <br>
  </body>
</html>

CSS

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

input {
  margin: 6px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var checkboxes = document.querySelectorAll('input[type=checkbox][name=gender]');

  for (var checkbox of checkboxes) {
    checkbox.addEventListener('change', function(event) {
      if (event.target.checked) {
        alert(`${event.target.value} is checked`);
      } else {
        alert(`${event.target.value} is unchecked`);
      }
    });
  }
}, false);