javascript - 过滤 JS 程序不工作

Question

我正在尝试创建一个网络应用程序，允许您选择电子邮件以发送群发消息。我想要一个过滤器，允许用户在童子军、 parent 和领导者之间进行选择，以获取他们的电子邮件。我无法弄清楚为什么代码不起作用，我认为它与 JavaScript 端有关，但我不确定。 The goal is for the "filter"check boxes to check all boxes in the table that have the target data-type and vice-versa when unchecked (ex when "Leader"is selected, all of the "Leader"data-type check boxes在表中进行检查。之前，我尝试通过使行显示为无并将整行分配给数据类型来进行过滤，这很有效，但是，我忘记备份该代码。

我的 HTML 看起来像这样:

<div class = "SelectionContainer">
<div class = "FiltersContainer">
   <ul id="filters">
      <li>
         <input type='checkbox' name='Filter' value="Leader" id="filter-Leader">
         <label for="filter-Leader">Leaders</label>
      </li>
      <li>
         <input type='checkbox' name='Filter' value="Parent" id = "filter-Parent"> 
         <label for="filter-Parent">Parents</label>
      </li>
      <li>
         <input type='checkbox' name='Filter' value="Scout" id = "filter-Scout"> 
         <label for="filter-Scout">Scouts</label>
      </li>
   </ul>
</div>
<div class = "EmailsContainer">
   <form action = "broadcasting.php" method = "get">
      <table class = 'hubTable' id = 'FilterTarget'>
         <tr class = 'tableheader'>
            <td class = 'hubCell'>Email</td>
            <td class = 'hubCell'>Name</td>
            <td class = 'hubCell'>Type</td>
            <td class = 'hubCell'>Subtype</td>
         </tr>
         <tr class = 'hubRow' >
            <td class = 'hubCell'><input class = 'hubCheck' type='checkbox' data-type='Scout' name='check_list[]' value='mikeb@web.net'  > mikeb@we.net </td>
            <td class = 'hubCell'>Biden, Mike </td>
            <td class = 'hubCell' id = 'Type'>Scout </td>
            <td class = 'hubCell' id = 'SubType'>Senior Patrol Leader </td>
         </tr>
         <tr class = 'hubRow' >
            <td class = 'hubCell'><input class = 'hubCheck' type='checkbox' data-type='Parent' name='check_list[]' value='sueb@gmail.com'  > sueb@gmail.com </td>
            <td class = 'hubCell'>Biden, Sue </td>
            <td class = 'hubCell' id = 'Type'>Parent </td>
            <td class = 'hubCell' id = 'SubType'>Unassigned </td>
         </tr>
         <tr class = 'hubRow' >
            <td class = 'hubCell'><input class = 'hubCheck' type='checkbox' data-type='Leader' name='check_list[]' value='msmith@me.com'  > msmith@me.com </td>
            <td class = 'hubCell'>smith, Michael </td>
            <td class = 'hubCell' id = 'Type'>Leader </td>
            <td class = 'hubCell' id = 'SubType'>Scout Master </td>
         </tr>
         <tr class = 'hubRow' >
            <td class = 'hubCell'><input class = 'hubCheck' type='checkbox' data-type='Scout' name='check_list[]' value='russel.gill@domain.org'  > russel.gill@suffieldstudent.org </td>
            <td class = 'hubCell'>Gill, Russel </td>
            <td class = 'hubCell' id = 'Type'>Scout </td>
            <td class = 'hubCell' id = 'SubType'>Patrol Leader </td>
         </tr>
      </table>
   </form>
</div>

我尝试使用输入框的数据类型标签进行过滤，以便 JS 可以找到它。我的 JS 代码如下所示:

var filterTarget = document.querySelectorAll(".hubCheck input[type="checkbox"]");
var filters = document.querySelectorAll("#filters li");

for (var i = 0; i < filters.length; i++){
    filters[i].addEventListener("click", filterItems, false);
    filters[i].checked = true;
}
function filterItems(e){
    var clickedItem = e.target;
    if (clickedItem.checked == true) {
    document.getElementById("checkbox").checked = true;
    } else if (clickedItem.checked == false) {
        document.getElementById("checkbox").checked = false;
    } else {

    }
}

我认为错误出在 JS 中的某个地方，因为我对这门语言的精通不如对 HTML 和 PHP 的精通。一双更聪明、更有经验的眼睛将不胜感激。提前致谢!

Answer 1

您遇到的问题是因为 document.getElementById("checkbox").checked 语法，因为没有带有复选框的 id。而且您没有与数据类型值进行比较。我建议您使用您在数据类型中放入的内容，也将其放在类名中。

我的解决方案 HTML

<div class = "SelectionContainer">
<div class = "FiltersContainer">
   <ul id="filters">
      <li>
         <input type='checkbox' name='Filter' value="Leader" id="filter-Leader">
         <label for="filter-Leader">Leaders</label>
      </li>
      <li>
         <input type='checkbox' name='Filter' value="Parent" id = "filter-Parent"> 
         <label for="filter-Parent">Parents</label>
      </li>
      <li>
         <input type='checkbox' name='Filter' value="Scout" id = "filter-Scout"> 
         <label for="filter-Scout">Scouts</label>
      </li>
   </ul>
</div>
<div class = "EmailsContainer">
   <form action = "broadcasting.php" method = "get">
      <table class = 'hubTable' id = 'FilterTarget'>
         <tr class = 'tableheader'>
            <td class = 'hubCell'>Email</td>
            <td class = 'hubCell'>Name</td>
            <td class = 'hubCell'>Type</td>
            <td class = 'hubCell'>Subtype</td>
         </tr>
         <tr class = 'hubRow' >
            <td class = 'hubCell'><input class = 'hubCheck Scout' type='checkbox' data-type='Scout' name='check_list[]' value='mikeb@web.net'  > mikeb@we.net </td>
            <td class = 'hubCell'>Biden, Mike </td>
            <td class = 'hubCell' id = 'Type'>Scout </td>
            <td class = 'hubCell' id = 'SubType'>Senior Patrol Leader </td>
         </tr>
         <tr class = 'hubRow' >
            <td class = 'hubCell'><input class = 'hubCheck Parent' type='checkbox' data-type='Parent' name='check_list[]' value='sueb@gmail.com'  > sueb@gmail.com </td>
            <td class = 'hubCell'>Biden, Sue </td>
            <td class = 'hubCell' id = 'Type'>Parent </td>
            <td class = 'hubCell' id = 'SubType'>Unassigned </td>
         </tr>
         <tr class = 'hubRow' >
            <td class = 'hubCell'><input class = 'hubCheck Leader' id="asd" type='checkbox' data-type='Leader' name='check_list[]' value='msmith@me.com'  > msmith@me.com </td>
            <td class = 'hubCell'>smith, Michael </td>
            <td class = 'hubCell' id = 'Type'>Leader </td>
            <td class = 'hubCell' id = 'SubType'>Scout Master </td>
         </tr>
         <tr class = 'hubRow' >
            <td class = 'hubCell'><input class = 'hubCheck Scout' type='checkbox' data-type='Scout' name='check_list[]' value='russel.gill@domain.org'  > russel.gill@suffieldstudent.org </td>
            <td class = 'hubCell'>Gill, Russel </td>
            <td class = 'hubCell' id = 'Type'>Scout </td>
            <td class = 'hubCell' id = 'SubType'>Patrol Leader </td>
         </tr>
      </table>
   </form>
</div>

JavaScript

var filterTarget = document.querySelectorAll('.hubCheck input[type="checkbox"]');
var filters = document.querySelectorAll("#filters li");

for (var i = 0; i < filters.length; i++){
    filters[i].addEventListener("click", filterItems, false);
    filters[i].checked = true;
}
function filterItems(e){
    var clickedItem = e.target;

    if (clickedItem.checked == true) {
    var elem= document.getElementsByClassName(clickedItem.value);
    checkboxupdater(elem, true);

} else if (clickedItem.checked == false) {
var elem= document.getElementsByClassName(clickedItem.value);
         checkboxupdater(elem, false);
    } else {

    }
}

function checkboxupdater(ele,val)
{
  for(var ii = 0; ii < ele.length; ii++)
  {
    ele[ii].checked = val;
  }
}