JSFiddle - React, Tailwind, and code Playground

HTML

<div class=test>
  <p>
    <label><input type="checkbox" checked />foo</label>
    <label><input type="checkbox" />bar</label>
    <label><input type="checkbox" />hoge</label>
  </p>
  <p>
    <label><input type="radio" name="test" />foo</label>
    <label><input type="radio" name="test" />bar</label>
    <label><input type="radio" name="test" checked />hoge</label>
  </p>
</div>

CSS

div{margin:50px;}
p{margin-bottom:15px;}

JavaScript

$(":checked").parent('test').css("background","#f3f365");
    $("input").click(function(e) {
        var t = e.target.type;
        var chk = $(this).prop('checked');
        var name = $(this).attr('name');
        if(t === 'checkbox') {
            if(chk === true){
                $(this).parent().css('background', '#f3f365');
            } else {
                $(this).parent().css('background-color', '');
            }
            return true;
        } else if(t === 'radio') {
            if(chk === true){
                $("input[name=" + name + "]").parent().css("background-color","");
                $(this).parent().css("background","#f3f365");
            }
            return true;
        }
    });