Моя функция поиска перестала работать, так как я изменил теги элементов.

Question

У меня есть список предметов в выпадающем меню с нажимаемой кнопкой.Изначально они были в тегах, но мне пришлось поменять их на флажки, чтобы разрешить определенные функции.Когда я изменил их, моя функция поиска перестала работать.Я попытался изменить поиск .js, но не могу понять, почему он не работает.

Вот мой .html

<div class="dropdown">
  <button type="button" id="hobbyFilter" onclick="openHobbyFilter()" class="dropbtn">Hobbies</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <input type="checkbox" id="hobbies" href="hobby">Hobby</input><br>
    <input type="checkbox" id="hobbies" href="cycling">Cycling</input><br>
    <input type="checkbox" id="hobbies" href="runing">Running</input><br>
    <input type="checkbox" id="hobbies" href="sky diving">Sky Diving</input><br>
    <input type="checkbox" id="hobbies" href="bmx">BMX</input><br>
  </div>
</div><br>

Вот мой .js

function filterFunction() {
      var input, filter, ul, li, a, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      div = document.getElementById("myDropdown");
      a = div.getElementsById("hobbies");
      for (i = 0; i < a.length; i++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
          a[i].style.display = "show";
        } else {
          a[i].style.display = "none";
        }
      }
    }

Answer 1

Вы не можете получить несколько идентификаторов, так как они должны быть уникальными.Попробуйте изменить их на классы, а затем измените a = div.getElementsById("hobbies"); на a = div.getElementsByClassName("hobbies"); следующим образом:

function filterFunction() {
      var input, filter, ul, li, a, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      div = document.getElementById("myDropdown");
      a = div.getElementsByClassName("hobbies");
      for (i = 0; i < a.length; i++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
          a[i].style.display = "show";
        } else {
          a[i].style.display = "none";
        }
      }
    }

<div class="dropdown">
  <button type="button" id="hobbyFilter" onclick="openHobbyFilter()" class="dropbtn">Hobbies</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <input type="checkbox" class="hobbies" href="hobby">Hobby</input><br>
    <input type="checkbox" class="hobbies" href="cycling">Cycling</input><br>
    <input type="checkbox" class="hobbies" href="runing">Running</input><br>
    <input type="checkbox" class="hobbies" href="sky diving">Sky Diving</input><br>
    <input type="checkbox" class="hobbies" href="bmx">BMX</input><br>
  </div>
</div><br>