<ul>
  <li><input class="filter" type="checkbox" value="0"> Cat Name id#0</li>
  <li><input class="filter" type="checkbox" value="1"> Cat Name id#1</li>
  <li><input class="filter" type="checkbox" value="2"> Cat Name id#2</li>
  <li><input class="filter" type="checkbox" value="3"> Cat Name id#3</li>
  <li><input class="filter" type="checkbox" value="4"> Cat Name id#4</li>
  <li><input class="filter" type="checkbox" value="5"> Cat Name id#5</li>
  <li><input class="filter" type="checkbox" value="6"> Cat Name id#6</li>
  <li><input class="filter" type="checkbox" value="7"> Cat Name id#7</li>
</ul>
document.addEventListener("change", e => {
  const filterCheckbox = e.target.closest(".filter");
  if (!filterCheckbox) return;
  
  const usedTags = [...document.querySelectorAll(".filter")]
    .filter(e => e.checked)
    .map(e => +e.value);
  
  console.log(usedTags);
  // Тут запрос на сервер и передача ему usedTags в виде JSON например, потом рендеринг ответа.
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.