Multiple check show/hide

by bartula

HTML

<form>
    <input type="checkbox" name="c1" value='NAC'/>NAC<br>
    <input type="checkbox" name="c1" value='BSA'/>BSA<br>
    <input type="checkbox" name="c1" value='CSA'/>CSA<br>
    <input type="checkbox" name="c1" value='GSA'/>GSA<br>
    <input type="checkbox" name="c1" value='VIA'/>VIA<br>
    <input type="checkbox" name="c1" value='ACB'/>ACB<br>
    <input type="checkbox" name="c1" value='ACC'/>ACC<br>
    <input type="checkbox" name="c1" value='CHE'/>CHE<br>
    
    <div class="item NAC BSA CSA">NAC BSA CSA</div>
    <div class="item GSA">GSA</div>
    <div class="item VIA">VIA</div>
    <div class="item ACB ACC">ACB ACC</div>
    <div class="item CHE">CHE</div>
    <div class="item TCE">TCE</div>
    
</form>

CSS

div {
    display:none;
}

JavaScript

$(document).ready(function() {
    $('input[type=checkbox]').on('change', function() {
        $('.item ').hide();
        $('input[type=checkbox]:checked').each(function() {
            var value = $(this).attr('value');
            $('.' + value).show();
        });
    });
});