0

Нужно написать множественный фильтр. Решил попробовать на jquery, но раньше с ним никогда не работал и столкнулся с проблемой.На данном этапе между всеми чекбоксами отношение AND. А должен работать так: Show (Class_11 OR Class12) AND (Class21 OR Class22). Не обязательно делать это моим способом, даже не обязательно использовать именно jquery.

function run() {

    let classes = new Set();
    let allCheckboxes = document.querySelectorAll(".checkbox_danila");
    clearList(allCheckboxes);
    allCheckboxes.forEach((el) => {
            clearList(allCheckboxes);
            if (el.checked) {
                classes.add(el.name);
            } else {
                classes.delete(el.name);
            }
            if (Array.from(classes.values()).length){
                document.querySelectorAll(getRightClass(classes)).forEach((blockElement) => {
                    blockElement.style.display = "block";
                });
        }
    });
}

function getRightClass(classes) {
    return `.${Array.from(classes).join('.')}`;
}

function clearList(checkboxes) {
    checkboxes.forEach((el) => {
        document.querySelectorAll(`.${el.name}`).forEach((blockElement) => {
            blockElement.style.display = "none";
        });
    });
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Title</title>
    <style>
        .box {
            padding: 20px;
            background: steelblue;
            font-size: 1.5em;
            color: white;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row" style="margin: 20px 0px">
        <div class="col box">
            <form action="">
                <h3>Category-1</h3>
                <label class="col-md-4">
                    <span>class_1</span>
                    <input type="checkbox" name="class_11" class="checkbox_1 checkbox_danila">
                </label>
                <label class="col">
                    <span>class_2</span>
                    <input type="checkbox" name="class_12" class="checkbox_2 checkbox_danila">
                </label>
                </form>
                <form action="">
                <h3>Category-2</h3>
                <label class="col-md-4">
                    <span>class_3</span>
                    <input type="checkbox" name="class_21" class="checkbox_3 checkbox_danila">
                </label>
                <label class="col">
                    <span>class_4</span>
                    <input type="checkbox" name="class_22" class="checkbox_3 checkbox_danila">
                </label>
            </form>
            <button type="button" class="btn btn-primary" onclick="run()">Найти</button>
        </div>
    </div>
    <div class="row">
        <div class="col-2">
            <p class="class_11 class_21 box">11 21</p>
        </div>
        <div class="col-2">
            <p class="class_12 class_21 box">12 21</p>
        </div>
        <div class="col-2">
            <p class="class_11 class_22 box">11 22</p>
        </div>
        <div class="col-2">
            <p class="class_12 class_22 box">12 22</p>
        </div>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
<script src="js.js"></script>
</body>
</html>

1 ответ 1

1

Если нужен OR, то стоит использовать не чекбоксы, а радиобаттоны. Ну и можно обойтись вообще без js/jquery:

.result {
  display: none;
}
#class11:checked ~ #class21:checked ~ .class11-class21,
#class12:checked ~ #class21:checked ~ .class12-class21,
#class11:checked ~ #class22:checked ~ .class11-class22,
#class12:checked ~ #class22:checked ~ .class12-class22 {
  display: block;
}
<input type="radio" name="first" id="class11" /><label for="class11">Class11</label>
<input type="radio" name="first" id="class12" /><label for="class12">Class12</label>
<br /><br />
<input type="radio" name="second" id="class21" /><label for="class21">Class21</label>
<input type="radio" name="second" id="class22" /><label for="class22">Class22</label>
<br /><br />
<div class="result class11-class21">Выбраны классы 11 и 21</div>
<div class="result class11-class22">Выбраны классы 11 и 22</div>
<div class="result class12-class21">Выбраны классы 12 и 21</div>
<div class="result class12-class22">Выбраны классы 12 и 22</div>

2
  • Понятно, что с радиобаттонами будет работать, как работает и сейчас при активации лишь одного чекбокса в категории. Но мне нужно, чтобы была возможность выбрать несколько чекбоксов в одной категории. Структура, которая мне нужна: Show (Class_11 OR Class_12) AND (Class_21 OR Class_22) Commented 4 апр. 2019 в 9:13
  • @DaniilLobchenko, ну так я Вам и привёл структуру Show (Class_11 OR Class12) AND (Class21 OR Class22). А Вам, судя по комментарию, как раз нужны везде AND, чтобы можно было выбрать несколько в одной категории и несколько в другой. Commented 4 апр. 2019 в 9:16

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.