andamurobl,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 100px;
font-family: sans-serif;
color: #fff;
background: #2f2f2f;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
input,
label {
cursor: pointer;
}
label:nth-child(4) {
margin-right: 50px;
}
div.target_item {
width: 100px;
height: 100px;
display: inline-block;
margin-top: 100px;
opacity: 1;
transition: all .3s ease;
margin-right: 10px;
border: 2px solid #fff;
}
div[data-form="round"] {
border-radius: 50px;
}
div[data-color="red"] {
background: rgb(175, 57, 57);
}
div[data-color="blue"] {
background: rgb(53, 131, 194);
}
#refresh {
margin-top: 100px;
border-radius: 50%;
cursor: pointer;
text-decoration: underline;
}
.hided {
opacity: 0 !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const switchers = document.querySelector(".switchers");
const category = Array.from(switchers.querySelectorAll("[data-type]"))
const blocks = document.querySelectorAll(".blocks .target_item");
document.querySelector(".switchers").addEventListener("change", function(event) {
let data = category.map(el => {
const type = el.dataset.type;
const options = [...el.querySelectorAll(":checked")].map(({
dataset
}) => dataset[type])
return {
type,
options
}
});
blocks.forEach(elem => {
const hide = !data.every(({
type,
options
}) =>
!options.length || options.includes(elem.dataset[type])
);
elem.classList.toggle("hided", hide)
})
});
});
</script>
</head>
<body>
<div class="switchers">
<div data-type="color">
<label><input type="checkbox" data-color="red">Reds</label>
<label><input type="checkbox" data-color="blue">Blues</label>
</div>
<div data-type="form">
<label><input type="checkbox" data-form="rect">Rects</label>
<label><input type="checkbox" data-form="round">Rounds</label>
</div>
</div>
<div class="blocks">
<div class="target_item" data-color="red" data-form="rect"></div>
<div class="target_item" data-color="blue" data-form="rect"></div>
<div class="target_item" data-color="red" data-form="round"></div>
<div class="target_item" data-color="blue" data-form="round"></div>
</div>
</body>
</html>