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

Question

[verstak2020]

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

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

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

Answer 1

[0xD34F]

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

document.querySelector('.options').addEventListener('change', e => {
  const [ not, has ] = Array.prototype.reduce.call(
    e.currentTarget.querySelectorAll('input'),
    (acc, n) => (acc[+n.checked].push(`.${n.value}`), acc),
    [ [], [] ]
  );

  const selector = `${has.join('')}:not(${not.join(',')})`;

  for (const n of document.querySelector('.box').children) {
    n.classList.toggle('hidden', !n.matches(selector));
  }
});

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

const checkboxes = [...document.querySelectorAll('.options input')];
const items = [...document.querySelector('.box').children];

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

function onChange() {
  items.forEach(({ classList: cl }) => {
    cl.toggle('hidden', checkboxes.some(n => n.checked !== cl.contains(n.value)));
  });
}

Comments

[verstak2020]

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