JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<input id="cb1" type="checkbox" name="cb" checked="checked" value="checkbox" /> checkbox 1<br/>
<input id="cb2" type="checkbox" name="cb" checked="checked" value="checkbox" /> checkbox 2<br/>
<input id="cb3" type="checkbox" name="cb" checked="checked" value="checkbox" /> checkbox 3<br/>


<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box3">3</div>
<div class="box box3">3</div>
<div class="box box3">3</div>
<div class="box box3">3</div>

CSS

.box {
    width:100px;
    height:100px;
    background-color:#aaa;
    border:1px solid black;
    float:left;
}

JavaScript

$('input[name=cb]').change(function() {
    var cb1;
    var cb2;
    var cb3;
    
    if($('#cb1').is(':checked')) {
        cb1 = true;
    } else {
        cb1 = false;
    }
    
    if($('#cb2').is(':checked')) {
        cb2 = true;
    } else {
        cb2 = false;
    }    
    
    if($('#cb3').is(':checked')) {
        cb3 = true;
    } else {
        cb3 = false;
    }
    
    if(cb1) $('.box1').show();
    else $('.box1').hide();
    if(cb2) $('.box2').show();
    else $('.box2').hide();
    if(cb3) $('.box3').show();
    else $('.box3').hide();
    
});