Как реализовать фильтр товаров на checkbox?

Question

[Roma Ishutin]

Надо реализовать фильтр товаров с помощью checkbox, отображать только те товары напротив, которых стоит чекбокс.

<main class="main">
    <div class="container">
        <h1 style="display: block; width: 100%; color: black; text-align: center">Товари</h1>
        <div class="filter">
            <div class="text-center">
                <p>
                    <label><input class="form-check-input" type="checkbox" value="bench" data-filter="bench">Лавочки</label><br>
                    <label><input class="form-check-input" type="checkbox" value="table" data-filter="table">Столи</label><br>
                    <label><input class="form-check-input" type="checkbox" value="sets" data-filter="sets">Комплекти</label><br>
                </p>
                <p>
                    <button id="btn" class="btn btn-sm btn-outline-primary">Переглянути</button>
                </p>
            </div>
        </div>

        <div class="goods">
            <div class="cart-product" data-category="bench">
                <h2>Лавка</h2>
                <img src="img/bench/0101.jpg" alt="">
            </div>
            <div class="cart-product" data-category="bench">
                <h2>Лавка</h2>
                <img src="img/bench/0102.jpg" alt="">
            </div>
            <div class="cart-product" data-category="bench">
                <h2>Лавка</h2>
                <img src="img/bench/0103.jpg" alt="">
            </div>

            <div class="cart-product" data-category="table">
                <h2>Стіл</h2>
                <img src="img/table/0201.jpg" alt="">
            </div>
            <div class="cart-product" data-category="sets">
                <h2>Комплект</h2>
                <img src="img/sets/0301.jpg" alt="">
            </div>
        </div>
    </div>
</main>

Comments

[Антон Литвиненко]

А где код скрипта то?
Как вариант при каждом пересчёте прятать все и отображать выбранные

Answer 1

[0xD34F]

.hidden {
  display: none;
}

const filter = document.querySelector('.filter');

filter.addEventListener('change', function() {
  document.querySelectorAll('.cart-product').forEach(function(n) {
    n.classList.toggle('hidden', this.length && !this.includes(n.dataset.category));
  }, Array.from(this.querySelectorAll(':checked'), n => n.dataset.filter));
});

filter.dispatchEvent(new Event('change'));

Comments

[Roma Ishutin]

0xD34F Спасибо большой очень помогли. Только теперь, если все чекбоксы пустые, то товары не отображаются. Если не сложно могли бы подсказать как сделать?

[0xD34F]

обновил ответ

[Roma Ishutin]

0xD34F, Ты просто лучший ❤❤❤❤