Question

我正在尝试创建一个网络应用，允许您选择电子邮件以发送爆炸信息。我想要一个过滤器，允许用户在各种童子军，父母和领导者之间进行选择以获取他们的电子邮件。我无法弄清楚为什么代码不起作用，我认为它与JavaScript端有关，但我不确定。目标是＆＃34;过滤器＆＃34;复选框以检查表中具有目标数据类型的所有框，反之亦然（未选中＆＃34; Leader＆＃34;选中，所有＆＃34; Leader＆＃34;数据类型在表格中检查复选框。之前，我试图通过使行显示为无来过滤并将整行分配给数据类型，但是这样做有效，但是，我忘了备份该代码。

我的HTML看起来像这样：

var newImg = document.createElement('img');
newImg.setAttribute('id', newimage);
newImage.addEventListener("dragstart", drag);

我尝试使用带有输入框的data-type标签进行过滤，以便JS可以找到它。我的JS代码如下所示：

<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的某个地方，因为我不像HTML和PHP那样精通语言。一组更聪明，更有经验的眼睛将非常感激。提前谢谢！

Answer 1

您遇到的问题是由于 document.getElementById（＆＃34;复选框＆＃34;）。选中语法，因为没有带复选框的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;
  }
}

过滤JS程序不起作用

1 个答案: