Примерно так? Если выбранные темы есть в блоке, то он отображется.
/*Создадим массив из объектов, который будет содержать в себе ссылку на блок и темы содержащиеся в блоке
{
node: ...,
themes: [...]
}
*/
const blocks = Array.
from(document.querySelectorAll('.filter__column'))
.map((block) => {
return {
node: block,
themes: Array.from(block.classList)
.filter( blockClass => blockClass.includes("filter__checkbox_filter"))
}
});
/* Такую же операцию проведем с чекбоксами
{
node: ...,
theme: ...
}
*/
const inputs = Array.
from(document.querySelectorAll('.checkbox__input'))
.map((check) => {
return {
node: check,
theme: check.getAttribute("data-filter")
}
});
//Функция которая будет вызываться при любом изменении чекбокса
function onCheckBoxChange() {
const checkedInput = inputs.filter(c => c.node.checked);
if (checkedInput.length == 0)
{
blocks.forEach(block => {block.node.classList.remove("_hidden-checkbox")}) //если фильтров не выбрано, то отображаем все элементы
} else {
blocks.forEach(block => {block.node.classList.add("_hidden-checkbox")}); // иначе скроем все элементы
let buffBlocks = [...blocks]; // Здесь собираем только те блоки, которые содержат нужные темы
checkedInput.forEach(input => {
buffBlocks = buffBlocks.filter(block => {
return block.themes.includes(`filter__checkbox_${input.theme}`);
});
});
buffBlocks.forEach(block => block.node.classList.remove("_hidden-checkbox")); //Отобразим блоки, которые соответствуют фильтру
}
}
document.querySelector(".checkboxes").addEventListener("change", onCheckBoxChange);
