Как на Jquery добавлять и удалять идентичные значения (текст) в блок?

Question

[jakiro0102]

Есть фильтр с чекбоксами (см на картинку), пытаюсь сделать фильтрацию

При выборе любого чекбокс - в верхнее поле должно записываться значение из выбранного чекбокса, при нескольких вариантах - в поле должны записываться все варианты которые были выбраны

При снятии чекбокса - в поле должно исчезать тоже выбранный ответ. Как это сделать?
Пытался сделать это всё через массив, но дошел до момента проверки и удаления одинаковых значений, и затуп. Как это можно решить?

<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>

Comments

[0xD34F]

Разметка не показана. Исправляйте вопрос.

[FeST1VaL]

записываете в массив ID выбранных. если снимаете, то ищите в массиве нужный ID и удаляете от туда... не понимаю какие у вас могут быть дубли

[jakiro0102]

0xD34F, добавил

[jakiro0102]

FeST1VaL, вот я и не пойму как удалить в массиву нужный ID если он уже существует

[twobomb]

залей на jsfiddle

Answer 1

[0xD34F]

const filterSelector = '.js-filter';
const itemSelector = '.dfth__item';
const checkboxSelector = '.dfth__check:checked';
const labelSelector = '.dfth__label';
const resetSelector = '.dfth__reset';
const selectedSelector = '.js-type-result';
const defaultValue = 'ничего не выбрано';

Вот jquery:

const $filter = $(filterSelector).change(function() {
  const selected = $(checkboxSelector, this)
    .closest(itemSelector)
    .find(labelSelector)
    .get()
    .map(n => $(n).text())
    .join(', ');

  $(selectedSelector, this).text(selected || defaultValue);
});

$filter.find(resetSelector).click(() => {
  $filter.find(checkboxSelector).prop('checked', false);
  $filter.trigger('change');
});

А вот jquery нет:

const filter = document.querySelector(filterSelector);

filter.addEventListener('change', ({ currentTarget: ct }) => {
  const selected = Array
    .from(
      ct.querySelectorAll(checkboxSelector),
      n => n.closest(itemSelector).querySelector(labelSelector).textContent)
    .join(', ');

  ct.querySelector(selectedSelector).textContent = selected || defaultValue;
});

filter.querySelector(resetSelector).addEventListener('click', () => {
  filter.querySelectorAll(checkboxSelector).forEach(n => n.checked = false);
  filter.dispatchEvent(new Event('change'));
});

Comments

[jakiro0102]

Спасибо!