JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<input value="af"/>
<label>
    <input type="checkbox" class="custom_checkbox" />
    <span>Text</span>
</label>
<label>
    <input type="checkbox" class="custom_checkbox" />
    <span>Text</span>
</label>
<label>
    <input type="checkbox" class="custom_checkbox" />
    <span>Text</span>
</label>

CSS

body {
  padding: 1em;
}

.custom_checkbox[type="checkbox"]:checked + span:not(.lever)::before {
  border: 2px solid transparent;
  border-bottom: 2px solid #ffd600;
  border-right: 2px solid #ffd600;
  background: transparent;
}

.checked {
  color: #ffd600;
}

.unchecked {
  color: #9e9e9e;
}

JavaScript

$(function() {
  $('.custom_checkbox').prop('checked', false);

  $('.custom_checkbox').on('change', function(){
    var parentLabel = $(this).parent("label");
    if ( $(this).prop('checked') === false ) {
      //alert("Unchecked");
      $("span", parentLabel).removeClass("checked").addClass("unchecked");
    } else {
      //alert("Checked");
      $("span", parentLabel).removeClass("unchecked").addClass("checked");
    }
  });
});