JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

Категория 1 <input type="checkbox" id="cat1" class="selectAll" /> <span>Отметить все</span><br />
Категория 2 <input type="checkbox" id="cat2" class="selectAll" /> <span>Отметить все</span><br />
<ul>
    <li><input type="checkbox" name="cat1" /></li>
    <li><input type="checkbox" name="cat1" /></li>
    <li><input type="checkbox" name="cat1" /></li>
    <li><input type="checkbox" name="cat1" /></li>
</ul>
<ul>
    <li><input type="checkbox" name="cat2" /></li>
    <li><input type="checkbox" name="cat2" /></li>
    <li><input type="checkbox" name="cat2" /></li>
    <li><input type="checkbox" name="cat2" /></li>
</ul>

CSS

ul {
    float: left;
    list-style: decimal;
}
span {
    font-size: 12px;
}

JavaScript

$('.selectAll').change(function(){
    var ch = $('input[name="' + $(this).attr('id') + '"]');
    if($(this).is(':checked')){
        ch.prop('checked',true);
        $(this).next('span').text('Убрать все');
    } else {
        ch.prop('checked',false);
        $(this).next('span').text('Отметить все');
    }
});