JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<label for="ex1" id="ex-label-1">Y <input type="checkbox" id="ex1" name="ex" value="Y" /></label>
<label for="ex2" id="ex-label-2">M <input type="checkbox" id="ex2" name="ex" value="M" /></label>
<label for="ex5" id="ex-label-3">X <input type="checkbox" id="ex5" name="ex" value="X" /></label>
<label for="ex3" id="ex-label-4">N <input type="checkbox" id="ex3" name="ex" value="N" /></label>
<label for="ex6" id="ex-label-5">L <input type="checkbox" id="ex6" name="ex" value="L" /></label>
<label for="ex7" id="ex-label-6">Z <input type="checkbox" id="ex7" name="ex" value="Z" /></label>
<label for="ex4" id="ex-label-7">A <input type="checkbox" id="ex4" name="ex" value="A" /></label>

CSS

.im-checked { color: red; }
.im-unchecked { color: black; }

JavaScript

$("input[name='ex']:checkbox").live("click", function(){
  $(this).parent().toggleClass("im-unchecked", !this.checked)
                  .toggleClass("im-checked", this.checked); 
});