ShutyA1488
@ShutyA1488

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

Надо реализовать фильтр товаров с помощью checkbox, отображать только те товары напротив, которых стоит чекбокс.
5ed63b8c89883461239350.png
<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>
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
$('.filter').change(function() {
  const values = $('input:checked', this).get().map(n => n.dataset.filter);
  $('.cart-product').each((i, n) => $(n).toggle(values.includes(n.dataset.category)));
}).change();
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы