JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input id="demo_box_2" class="css-checkbox" type="checkbox" />
  <label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label>
  <input id="demo_box_3" class="css-checkbox" type="checkbox" />
  <label for="demo_box_3" name="demo_lbl_3" class="css-label">Selected Option</label>
</form>

CSS

input[type=checkbox].css-checkbox {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
  padding-left: 20px;
  height: 15px;
  display: inline-block;
  line-height: 15px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 15px;
  vertical-align: middle;
  cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
  background-position: 0 -15px;
}

.css-label {
  background-image: url(http://csscheckbox.com/checkboxes/lite-x-red.png);
}

JavaScript

$("input[type=checkbox]").click(function() {
  var msg = "";
  $("input[type=checkbox]").each(function() {
    if ($(this).is(":checked")) {
      msg += "#" + $(this).attr("id") + " is checked!\n";
    } else {
      msg += "#" + $(this).attr("id") + " is NOT checked!\n";
    }
  });
  alert(msg);
});