Coś udało mi się stworzyć, ale nie jestem do tego przekonany. Mimo wszystko jakiś trop
<form id="filter-options">
<fieldset>
<legend>filter item</legend>
<label for="red">red</label>
<input type="checkbox" id="red">
<label for="green">green</label>
<input type="checkbox" id="green">
<label for="blue">blue</label>
<input type="checkbox" id="blue">
<label for="orange">orange</label>
<input type="checkbox" id="orange">
<label for="yellow">yellow</label>
<input type="checkbox" id="yellow">
</fieldset>
</form>
<ul id="product-list">
<li class="red">
<h2>Red Fire Truck</h2>
</li>
<li class="blue">
<h2>Blue Kite</h2>
</li>
<li class="green blue">
<h2>Green & Blue Parot</h2>
</li>
<li class="yellow">
<h2>Yellow Canary</h2>
</li>
</ul>
ul{
list-style: none;
}
label{
margin-left: 20px;
}
const form = document.getElementById("filter-options");
const input = [...form.querySelectorAll('input')];
const product = document.getElementById("product-list");
const productItems = [...product.querySelectorAll('li')];
//funkcja zwaraca stringa z id zaznaczonych inputów
function inputCheckedId(arrayInput){
const checkedInput = [];
arrayInput.forEach(function(el){
if(el.checked){
checkedInput.push(el.id);
}
})
return checkedInput.join(" ");
}
form.addEventListener('input',function(){
//pętla po elementach li porównuje ich klasy (jako string) ze stringiem stworzonym z id inputów
productItems.forEach(function(el){
if( el.classList.value == inputCheckedId(input)) {
el.style.color= "red";
}
else{
el.style.color = "black";
}
});
});