JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <div>
        <input type="checkbox" value="1" /> foo1
    </div>
    <div>
        <input type="checkbox" value="2" /> foo2
    </div>
    <div>
        <input type="checkbox" value="3" /> foo3
    </div>
    <div>
        <input type="checkbox" value="4" /> foo4
    </div>
    <div>
        <input type="checkbox" value="5" /> foo5
    </div>
</div>

CSS

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

JavaScript

$(document).ready(function(){

$(document).on('click', ':checkbox', function(){
    $(this).prop('checked') ?
        $(this).parent().addClass("active") : 
        $(this).parent().removeClass("active");
    console.log(getChecked());
});

function getChecked(){
    var arr = [];
    $("input[type='checkbox']:checked").each(function(i, e){
        arr.push($(e).val());
        console.log("a");
    });
    return arr;
}    
    
});