JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<li class="b-filter-level-first__item dropdown-submenu js-no-close"><span class="b-filter-level-first__name b-filter-level-first__name--second open">Kategorie</span>
  <ul class="dropdown-menu b-dropdown__menu--second-menu js-no-close" style="display: block;">
    <li>
      <div class="b-checkbox">
        <input type="checkbox" name="model-name" id="model-name1">
        <label for="model-name1" class="b-checkbox__name b-checkbox__name--filter">Ringe</label>
      </div>
    </li>
    <li>
      <div class="b-checkbox">
        <input type="checkbox" name="model-name" id="model-name2">
        <label for="model-name2" class="b-checkbox__name b-checkbox__name--filter">Ohrringe</label>
      </div>
    </li>
    <li>
      <div class="b-checkbox">
        <input type="checkbox" name="model-name" id="model-name3">
        <label for="model-name3" class="b-checkbox__name b-checkbox__name--filter">Anhänger</label>
      </div>
    </li>
    <li>
      <div class="b-checkbox">
        <input type="checkbox" name="model-name" id="model-name4">
        <label for="model-name4" class="b-checkbox__name b-checkbox__name--filter">Ketten</label>
      </div>
    </li>
  </ul>
</li>

CSS

li {
  list-style: none;
}

JavaScript

/**
 * для вопроса https://toster.ru/q/308140
 */
var out = $('.b-filter-level-first__name--second');
var initial = out.text();
var selected = [];

function onChange(e){
  var v = $(e.target).parent().find('label').text()
    ,checked = $(e.target).prop('checked')
    ,i = selected.indexOf(v)
  ;
  
  if( checked) {
    if( !~i) selected.push(v);
  } else {
    if( !!~i) selected.splice(i,1);
  }
  
  out.text( initial + ( selected.length ? ': '+selected.join(', ') : ''));
}

$('input[name=model-name]').on('change', onChange);