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).ready(function() {
  $('input[type=checkbox][name=gender]').change(function() {
    if ($(this).prop("checked")) {
      alert(`${this.value} is checked`);
    }
    else {
      alert(`${this.value} is unchecked`);
    }
  });
});