JSFiddle - React, Tailwind, and code Playground

by danya_postfactum

HTML

<div class="select">
      <b class="heading">Выбор</b>
      <div class="option">
       <label><input type="checkbox" /> текст 1</label>
       <label><input type="checkbox" /> текст 2</label>
       <label><input type="checkbox" /> текст 3</label>
       <label><input type="checkbox" /> текст 4</label>
      </div>
     </div>


     <div class="select">
      <b class="heading">Выбор</b>
      <div class="option">
       <label><input type="checkbox" /> текст 1</label>
       <label><input type="checkbox" /> текст 2</label>
       <label><input type="checkbox" /> текст 3</label>
       <label><input type="checkbox" /> текст 4</label>
      </div>      
     </div>

JavaScript

$('.select .heading').each(function() {
    $(this).data('defaultText', $(this).text());
});
$('.select .option input').change(function() {
    var $context = $(this).closest('.select');
    var $heading = $context.find('.heading');
    var $labels = $context.find('input:checked').closest('label');
    $heading.text($labels.size() ? $labels.text() : $heading.data('defaultText'));
});