How to add and remove identical values ​​(text) in Jquery to a block?

Question

JavaScript

There is a filter with checkboxes (see the picture), I'm trying to filter

When any checkbox is selected, the value from the selected checkbox should be written to the top field, with several options, all the options that were selected should be written to the field

When the checkbox is removed, the field should disappear too selected answer. How to do it?
I tried to do it all through an array, but I got to the point of checking and deleting the same values, and blunt. How can this be resolved?

<div class="form-filter press-center__form-type js-filter js-open-filter-block filter-topic-js"
     id="press-center-filter-theme">
    <span class="js-type-result" data-title="Тема">Тема</span>
    <div class="form-hide js-hide">
        <div class="dfth__item js-select-all">
            <input type="checkbox" class="dfth__check" id="dfth-check-0">
            <label for="dfth-check-0" class="dfth__label">Все темы</label>
        </div>
        <div class="dfth__item js-select-item">
            <input type="checkbox" class="dfth__check" id="dfth-check-231" data-id="231">
            <label for="dfth-check-231" class="dfth__label">Новости</label>
        </div>
        <div class="dfth__item js-select-item">
            <input type="checkbox" class="dfth__check" id="dfth-check-232" data-id="232">
            <label for="dfth-check-232" class="dfth__label">Сбыт продукции</label>
        </div>
        <div class="dfth__reset">Очистить всё</div>
    </div>
</div>

Answer 1

$('.js-filter').change(function() {
  const selected = $('.dfth__check:checked', this)
    .closest('.dfth__item')
    .find('.dfth__label')
    .get()
    .map(n => n.innerText)
    .join(', ');

  $('.js-type-result', this).text(selected || дефолтное_значение);
});