JSFiddle - React, Tailwind, and code Playground

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>

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();
alert(val);  
});