JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

Soccer: <input type="checkbox" name="sports" value="soccer"  /><br />

Football: <input type="checkbox" name="sports" value="football"  /><br /> 

Baseball: <input type="checkbox" name="sports" value="baseball"  /><br /> 

Basketball: <input type="checkbox" name="sports" value="basketball"  />
<br>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />

CSS

.is-checked{
    color: red;
}

JavaScript

$('input[type="checkbox"], input[type="radio"]').each(function () {
    $(this).on('click', function () {
      $(this).parent().wrap('<div>').unwrap();  
        // works great for checkboxes, but not for radios
        if ($(this).prop('checked')) {
          $(this).addClass('is-checked');
        } else {
          $(this).removeClass('is-checked');
        }
    })
  })