Filter - wykluczanie

Question

Cześć,

Mam taki skrypt do filtrowania po tagach:

link

Jak zrobić w nim wykluczanie? W tym momencie działa, że jeżeli znajdzie szukany tag to go pokazuje, a jak zrobić, żeby np. po zaznaczeniu "Blue" i "Green" pokazało tylko jedną wartość, która spełnia oba warunki?

Answer 1

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";
    }
});
});