Нужно написать множественный фильтр. Решил попробовать на 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>