Javascript 使用类而不是 id

Question

我有下面的代码，因为它没有验证，所以我想从输入框中删除 id，并使 Javascript 使用类 (class="filterCat") 而不是 id。我该怎么做？

谢谢。

<form id="adv_searchform" action="/" method="get" name="adv_searchform" onsubmit="return manageMultipleCategoriesSearch()">
  Search: 
  <input id="adv_s" class="input input_large" type="text" name="s" value="" />
  <h3>Category filter:</h3>
  <ul id="catSearchFilters">
<li><input type="checkbox" id="filterCat" class="filterCat" value="38">Announcements</li>
<li><input type="checkbox" id="filterCat" class="filterCat" value="39">Commentary</li>
<li><input type="checkbox" id="filterCat" class="filterCat" value="1">Uncategorized</li></ul>  <div class="clear"></div>
  <input type="hidden" name="cat" value="" />
  <input type="submit" id="searchsubmit" value="Search" />
</form>

<script>
function manageMultipleCategoriesSearch(){

  var selectedCats = "";
  var isFirst = true;

  for (i=0; i<document.adv_searchform.filterCat.length; i++){
    if (document.adv_searchform.filterCat[i].checked == true){

    if (!isFirst)
      selectedCats += ',';

      selectedCats += document.adv_searchform.filterCat[i].value;
      isFirst = false;
    }
  }

  document.adv_searchform.cat.value = selectedCats;

  return true;
}
</script>

Answer 1

使用名称而不是 ID。并且您应该为不同的复选框使用不同的名称。

<li><input type="checkbox" name="filterCat1" class="filterCat" value="38">Announcements</li>
<li><input type="checkbox" name="filterCat2" class="filterCat" value="39">Commentary</li>
<li><input type="checkbox" name="filterCat3" class="filterCat" value="1">Uncategorized</li></ul>  <div class="clear"></div>

JS

var check = document.getElementsByClassName("filterCat");
for (i=0; i<check .length; i++){
    if (check[i].checked == true){

    if (!isFirst)
      selectedCats += ',';

      selectedCats += check [i].value;
      isFirst = false;
    }
  }