Список фильтров с использованием заполненного массива с несколькими значениями флажков, JavaScript

Question

Я пытаюсь создать двухэтапный фильтр, который показывает и скрывает элементы из списка.На первом этапе отображаются и скрываются элементы на основе параметров статического выбора.

На втором этапе отображаются и скрываются элементы на основе параметров выбора из списка переменных, который увеличивается со временем.

Я успешно положилвместе некоторые из JavaScript и первый этап фильтрации с информацией, доступной в Интернете.

Я борюсь со вторым этапом (в течение последних 2 недель), я понимаю, что мне нужно сделать, но мне кажется, что записать его в JavaScript не работает.Все, что я пробую, терпит неудачу.

Я понимаю большую часть того, что мне нужно сделать (я думаю ...):

1. Захватить все значения флажков и поместить их в массив.
2. Превратить их в индекс.

3. Выполнить цикл по списку и сравнить массив индексов со всеми элементами, представляющими класс "show".

   3a.Запустите условный оператор, который проверяет совпадения с тегом <h6> content и удаляет класс «show», если совпадений не найдено.

Я думаю, что у меня есть некоторые кусочки, но, кажется, не могу поставитьони вместе правильно.Я надеюсь, что дал достаточно информации.

Пожалуйста, помогите, я совершенно новичок в JavaScript.

Кроме того, кто-нибудь может сказать мне технический термин для системы фильтрации списков, подобной этой?

function openPage(pageName, elmnt) {
  // Hide all elements with class="tabcontent" by active */
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Remove the background color of all tablinks/buttons
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }

  // Show the specific tab content
  document.getElementById(pageName).style.display = "block";

}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("projectStatus");
var btns = btnContainer.getElementsByClassName("tablink");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}



// Get the element with id="activeOpen" and click on it
document.getElementById("defaultOpen").click();



//filtering elements
filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("result-thumb");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    ekRemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) ekAddClass(x[i], "show");
  }
}

// Show filtered elements
function ekAddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}


// Hide elements that are not selected
function ekRemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}


//Clear all selections from filterring form and show all results
function clearAllSelected() {
  var checkboxes = new Array();
  checkboxes = document.getElementsByTagName('input');

  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type == 'checkbox') {
      checkboxes[i].checked = false;
    }
  }
  document.getElementById('showAll').click();
}

.result-thumb {
  border: 1px solid #000;
  display: none;
  margin: 15px;
  padding: 3px;
}

.show {
  display: block;
}

h6,
p {
  padding: 0;
  margin: 0;
}

li {
  display: block;
}

<div id="projectStatus" class="tabs-buttons">
  <button class="tablink" onclick="filterSelection('current');" id="defaultOpen">Active Projects</button>
  <button class="tablink active" onclick="filterSelection('past');">Past Projects</button>
  <button class="tablink" onclick="filterSelection('all');">All Projects</button>
</div>
<div id="PastProjects" class="tabcontent">
  <p>Choose an area of focus</p>
  <li><input type="checkbox" name="vehicle1" value="Deirdre" oninput="filterCheck()" id="select-aofi"> Bob</li>
  <li><input type="checkbox" name="vehicle1" value="Bill" oninput="filterCheck()" id="select-aofi"> David</li>
  <li><input type="checkbox" name="vehicle1" value="Teresa" oninput="filterCheck()" id="select-aofi"> Teresa</li>
</div>

<div class="result-thumb current">
  <p>Current: Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
  <h6 class="">David</h6>
</div>
<!-- end.result-thumb -->

<div class="result-thumb past">
  <p>Past: Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
  <h6>Teresa</h6>
</div>
<!-- end.result-thumb -->

<div class="result-thumb past">
  <p>Past: Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
  <h6>Bob</h6>
</div>
<!-- end.result-thumb -->