JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<form>
 <input type="checkbox" id="redcheck" class="checkbox1">
 <input type="checkbox" id="greencheck" class="checkbox2">
 <input type="checkbox" id="bluecheck" class="checkbox3">
</form> 
     
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>

CSS

div
{
    background:#ddd;
    width:100px;
    height:100px;
    margin:10px;
    display:None;
    
    
}

JavaScript

$ ("input").change(function(){    
    var val='';
    
        $.each($('input:checkbox:checked'), function(index) {
            val += '.' + $(this).attr('class');        
        });
console.log(val);
        switch (val) {
            case '.checkbox1.checkbox2.checkbox3':
                $("body").css("background-color", "black");
                console.log('case 1');
                break;
            case '.checkbox1.checkbox2':
                $("body").css("background-color", "purple");
                console.log('case 2');
                break;
            case '.checkbox1.checkbox3':
                $("body").css("background-color", "green");
                console.log('case 3');
                break;
            case '.checkbox2.checkbox3':
                $("body").css("background-color", "orange");
                console.log('case 3');
                break;
            case '.checkbox1':
                $("body").css("background-color", "blue");
                console.log('case 3');
                break;
            case '.checkbox2':
                $("body").css("background-color", "red");
                console.log('case 3');
                break;
            case '.checkbox3':
                $("body").css("background-color", "yellow");
                console.log('case 3');
                break;
            default:
                $("body").css("background-color", "white");
                console.log('case 4');
                break;
        }

 });