JSFiddle - React, Tailwind, and code Playground

by Stalk

HTML

<div id="box">
    <div>
        <input type="checkbox" value="" /> foo1
    </div>
    <div>
        <input type="checkbox" value="" /> foo2
    </div>
    <div>
        <input type="checkbox" value="" /> foo3
    </div>
    <div>
        <input type="checkbox" value="" /> foo4
    </div>
    <div>
        <input type="checkbox" value="" /> foo5
    </div>
</div>

CSS

div {
    margin: .5em;
}
div.active {
    outline: solid 1px red;
}

JavaScript

$(document).on('click', ':checkbox', function(){
    $('#box div').removeClass('active')
    $('#box div :checkbox:checked').each(function(){
        $(this).closest('div').addClass('active')
    })
})