JSFiddle - React, Tailwind, and code Playground
HTML
<input type="checkbox" class="CheckBoxClass" />
<label> foo </label>
CSS
.CheckBoxClass{
}
.CheckBoxLabelClass{
background: url('/public/images/chk_off.png') no-repeat;
padding-left: 24px;
margin: 5px;
height: 22px;
width: 150px;
display: block;
}
.CheckBoxLabelClass:hover{
}
.LabelSelected{
color: red;
}
JavaScript
$(document).ready(function(){
$(".CheckBoxClass").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}else{
$(this).next("label").removeClass("LabelSelected");
}
});
});