JSFiddle - React, Tailwind, and code Playground

HTML

<label for="ex1" id="ex-label-1">Y <input type="checkbox" class="ex" id="ex1" name="ex" value="Y"  /></label>
<label for="ex2" id="ex-label-2">M <input type="checkbox" class="ex" id="ex2" name="ex" value="M"  /></label>
<label for="ex5" id="ex-label-3">X <input type="checkbox" class="ex" id="ex5" name="ex" value="X"  /></label>

CSS

.im-checked{
    background-color:red
}

JavaScript

$(".ex").live('click',function(){
    
  var cb = $(this);
    
  if(cb.is(':checked')){ 
    cb.parent().removeClass("im-unchecked").addClass("im-checked"); 
  }
  else{ 
    cb.parent().removeClass("im-checked").addClass("im-unchecked");
}});