在创建过滤数组内容的复选框方面需要帮助答案

【问题标题】：Need help on creating checkboxes that filter content of an array在创建过滤数组内容的复选框方面需要帮助
【发布时间】：2015-12-05 17:53:33
【问题描述】：

我刚开始学习 html、javascript 和 CSS，所以我只了解基础知识。对于我正在处理的这个类项目，我们必须创建复选框，可以根据数组中的字符串是否包含某个字母来过滤掉数组的内容。如果它们确实包含该字母，它们将从数组中删除。我原来的数组是一个叫words的数组

在我的 .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;
    
}

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

【问题讨论】：

标签： javascript html arrays button checkbox

【解决方案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;
    });
}

【讨论】：