JSFiddle - React, Tailwind, and code Playground

by Stalk

HTML

<div id="fid">
    <div>
        <div>
            <div>
                <label>
                    <input type="checkbox" id="High" value="Высокий"/>
                    <span for="High">Высокий</span>
                </label>
            </div>
            <div>
                <label>
                    <input id="Low" value="Низкий" type="checkbox"/>
                    <span for="Low">Низкий</span>
                </label>
            </div>
            <div>
                <label>
                    <input id="Middle" value="Средний" type="checkbox"/>
                    <span for="Middle">Средний</span>
                </label>
            </div>
            <div>
                <label>
                    <input id="Upper-Middle" value="Выше среднего" type="checkbox"/>
                    <span for="Upper-Middle">Выше среднего</span>
                </label>
            </div>
        </div>
    </div>
</div>

CSS

div.checkbox-activ {
    background: yellow;
}

JavaScript

$(document).on('click', ':checkbox', function(){
    $('#fid input').closest('div').removeClass('checkbox-activ')
    $('#fid input:checkbox:checked').each(function(){
        $(this).closest('div').addClass('checkbox-activ')
    })
    
    var val = $('#fid .checkbox-activ input').map(function(){return this.value;}).get();
    console.log(val);
});