JSFiddle - React, Tailwind, and code Playground

by danzkusuma

HTML

<div><input type="checkbox" id="chk"></div>
<div id="divs" class="yellow">a<div>

CSS

#divs{
    display:block;
    width:500px;
    height:70px;
    margin-top:10px;
}

#divs.yellow{
    background-color: #ff0;
}

#divs.red{
    background-color: #f00;
}

JavaScript

var flag = false;

function loadChange(dom, box){
    if (dom.is(':checked')) {
        box.removeClass();
        box.addClass("red");
    } else {
        box.removeClass();
        box.addClass("yellow");
    } 
}

$(function(){
    $('#divs').click(function(e){
        e.preventDefault();
        if(flag){
            flag = false;
            $('#chk').prop('checked', false);
        }else{
            flag = true;
            $('#chk').prop('checked', true);
        }
        
        loadChange($('#chk'), $(this));
    });
    
    
});