JSFiddle - React, Tailwind, and code Playground

HTML

<li onclick="this.className=(document.getElementById('id_MyJobChoices_0').checked?'active':'')" class="option table">
    <div class="option-checkbox"><div class="check"></div><input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="" /></div>
</li>
<div onclick="runtest()">click to test</div>

CSS

.option .option-checkbox input[type="checkbox"]{display:block}
.option.selected{color:#10a6b8}
.option.selected .check{margin:3px 1px;background:url(http://placehold.it/20x20) no-repeat;width:16px;height:13px;}

.option:hover{border:1px solid #0e91a1}
.option:active,.option.selected:active, .option.active{background-color:#0e91a1;color:#fff}

 .option-checkbox {
    background-color: #FFFFFF;
    border: 2px solid #E2E2E2;
    height: 20px;
    margin: 20px;
    width: 20px;
}

JavaScript

runtest=function(){
    alert( document.getElementById('id_MyJobChoices_0').className );
};