需要帮助创建过滤数组内容的复选框

Question

我刚开始学习html，javascript和CSS，所以我只理解基础知识。对于我正在处理的这个类项目，我们必须创建复选框，以便根据数组中的字符串是否包含某个字母来过滤出数组的内容。如果它们包含该字母，它们将从数组中移除。 我原来的阵列是所谓的话

在我的.html文件我有以下几点：

<form> 
 
<label> <input type="checkbox" id="A" onchange= "exclude()" /> Exclude words with 'A' <br /> </label> 
 
      <label> <input type="checkbox" id="I" onchange= "exclude()" /> Exclude words with 'I' <br /> </label> 
 
      <label> <input type="checkbox" id="O" onchange= "exclude()" /> Exclude words with 'O' <br /> </label>

，并在我的js文件我有：

function exclude() { 
 
    if (A.checked) { 
 
     filterByLetter(words, "A") 
 
    } 
 
    if (I.checked) { 
 
     filterByLetter(words, "I") 
 
    } 
 
    if (O.checked) { 
 
     filterByLetter(words, "O") 
 
    } 
 
} 
 

 
function filterByLetter(originalList, letter) { 
 
    var newList = []; 
 
    for (var i = 0; i < originalList.length; i++){ 
 
     if (originalList[i].indexOf(letter) == -1) { 
 
      newList.push(originalList[i]); 
 
      
 
     } 
 
    } 
 
    
 
    par.innerHTML = newList; 
 
    
 
}

当我运行此代码时，它可以工作，但是，当我选中了多个复选框时，只有最近的复选框才起作用。我怎样才能做到这一点，以便一次检查多个复选框将过滤掉所有字母的字符串？我该如何做到这一点，如果我最终取消勾选这些框，这些数字将不会被这些字母过滤掉？ 谢谢！

Answer 1

你filterByLetter函数返回的过滤列表如下：

function filterByLetter(originalList, letter) { 
    var newList = []; 
    for (var i = 0; i < originalList.length; i++){ 
     if (originalList[i].indexOf(letter) == -1) { 
      newList.push(originalList[i]); 
     } 
    } 
    return newList; 
} 

几乎总是更好，如果你的函数只做一件事情，在这种情况下，过滤，但不会更新HTML。现在，你可以申请了好几次：

function exclude() { 
    var filteredList = words.concat([]); // create a copy 
    if (A.checked) { 
     filteredList = filterByLetter(filteredList , "A") 
    } 
    if (I.checked) { 
     filteredList = filterByLetter(filteredList , "I") 
    } 
    if (O.checked) { 
     filteredList = filterByLetter(filteredList , "O") 
    } 

    par.innerHTML = filteredList; 
} 

奖励：对于更现代的实用风格起见，你可以写filterByLetter功能是这样的：

function filterByLetter(originalList, letter) { 
    return originalList.filter(function(x) { 
     return x.indexOf(letter) == -1; 
    }); 
}