Как сделать такой фильтр опций на js или jq?

Question

[verstak2020]

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

https://codepen.io/jivoy_web/pen/XWQXvJb

Смысл в том, что бы при выборе одного или нескольких чекбоксов, показывался один конкретный эдемент из множества предложенных.
К примеру выбираем чекбокс 1, и элемент показывается конкретно под этот чекбокс.
Выбираем чекбоксы 3 и 5, элемент показывается именно под эти чекбоксы.
И т.д, вариации могут быть различными, хоть такой например: выбираем чекбоксы 1, 2, 4 и 5 и должен отоброзится конкретный элемент для них.

Answer 1

[0xD34F]

Где находятся чекбоксы и фильтруемые элементы, какой класс обеспечивает сокрытие элементов:

const checkboxContainer = document.querySelector('.options');
const itemsContainer = document.querySelector('.box');
const hiddenClass = 'hidden';

Собираем селектор на основе состояний чекбоксов (выставлен - класс должен присутствовать, не выставлен - помещаем класс внутрь :not):

function getCheckedSelector(container) {
  const [ not, has ] = Array.prototype.reduce.call(
    container.querySelectorAll('input'),
    (acc, n) => (acc[+n.checked].push(`.${n.value}`), acc),
    [ [], [] ]
  );

  return has.join('') + (not.length ? `:not(${not.join(',')})` : '');
}

Затем проверяем фильтруемые элементы на соответствие селектору:

checkboxContainer.addEventListener('change', function() {
  const selector = getCheckedSelector(this);

  for (const n of itemsContainer.children) {
    n.classList.toggle(hiddenClass, !n.matches(selector));
  }
});

Или сначала прячем всё, а потом показываем что надо:

const toggleHidden = (selector, state) => itemsContainer
  .querySelectorAll(selector)
  .forEach(n => n.classList.toggle(hiddenClass, state));

checkboxContainer.addEventListener('change', e => {
  toggleHidden(':scope > *', true);
  toggleHidden(getCheckedSelector(e.currentTarget), false);
});

ИЛИ

При обработке элемента перебираем чекбоксы и проверяем, что их состояния соответствуют наличию классов у данного элемента:

const checkboxes = [...checkboxContainer.querySelectorAll('input')];
const onChange = function() {
  this.forEach(({ classList: cl }) => {
    cl.toggle(hiddenClass, checkboxes.some(n => n.checked !== cl.contains(n.value)));
  });
}.bind([...itemsContainer.children]);

checkboxes.forEach(n => n.addEventListener('change', onChange));

Comments

[verstak2020]

Большое спасибо, выручили