更改事件Javascript上的复选框

在我的页面中，我有一个字符串数组，在我的脚本中，我有一个函数，用于排除包含某些字符的字符串

我通过3个复选框来控制它

我有这样做的函数，但我的问题是当我选中两个复选框时，一个用于排除包含“a”的字符串，另一个用于排除包含“e”的字符串。我得到最后选中复选框的结果

如何制作一个能处理所有复选框并显示最终结果的函数

这就是我到目前为止所做的：

我的html：

<div id="demo"> </div>
<div class="item">
   <form id="aForm"  onchange="filter()">
      <input type="checkbox" id ="A" value="A">Exclude words with 'A'<br>
      <input type="checkbox" id ="E" value="E">Exclude words with 'E'<br>
      <input type="checkbox" id ="O" value="O">Exclude words with 'O'<br>
   <form id="aForm" >
</div> 

<script type="text/javascript">
var animals = ["Bear", "Mouse", "Cat", "Tiger", "Lion"]

function filter () {
    if(document.getElementById('A').checked) {
       var result2 = [];
       for (var animal in Animals) {
          if (Animals[animal].indexOf('a') == -1) {
             result2 += " " + Animals[animal];
          }
          document.getElementById("demo").innerHTML = result2;
        }
     }
    if(document.getElementById('E').checked) {
       var result2 = [];
       for (var animal in Animals) {
           if (Animals[animal].indexOf('e') == -1) {
              result2 += " " + Animals[animal];
            }
            document.getElementById("demo").innerHTML = result2;
        }
     }
    if(document.getElementById('O').checked) {
      var result2 = [];
      for (var animal in Animals)   {
         if (Animals[animal].indexOf('o') == -1) {
            result2 += " " + Animals[animal];
         }
        document.getElementById("demo").innerHTML = result2;
      }
    }
}

排除带有“A”的单词

排除带有“E”的单词

排除带有“O”的单词

动物变量=[“熊”、“老鼠”、“猫”、“老虎”、“狮子”]
函数过滤器（）{
if（document.getElementById（'A'）。选中）{
var result2=[]；
for（动物中的动物变量）{
if（动物[animal].indexOf（'a'）==-1）{
结果2+=''+动物[动物]；
}
document.getElementById（“demo”）.innerHTML=result2；
}
}
if（document.getElementById（'E'）。选中）{
var result2=[]；
for（动物中的动物变量）{
if（动物[animal].indexOf（'e'）==-1）{
结果2+=''+动物[动物]；
}
document.getElementById（“demo”）.innerHTML=result2；
}
}
if（document.getElementById（'O'）。选中）{
var result2=[]；
for（动物中的动物变量）{
if（动物[animal].indexOf（'o'）==-1）{
结果2+=''+动物[动物]；
}
document.getElementById（“demo”）.innerHTML=result2；
}
}
}

因为以前的检查所做的任何更改都会被最后一个

if

块覆盖

var动物=[“熊”、“老鼠”、“猫”、“老虎”、“狮子”]；
函数过滤器（）{
var a=document.getElementById（'a'）。选中，
e=document.getElementById（'e'）。选中，
o=document.getElementById（'o'）。选中，
result2；//复制一份
结果2=动物。过滤器（函数（值）{
value=value.toLowerCase（）；
返回（！a | value.indexOf（'a'）=-1）和（！e | value.indexOf（'e'）=-1）和（！o | value.indexOf（'o'）=-1）；
})
document.getElementById（“demo”）.innerHTML=result2；
}
过滤器（）

排除带有“A”的单词

排除带有“E”的单词

排除带有“O”的单词

下面的逻辑代码应该可以正常工作


var动物=[“熊”、“老鼠”、“猫”、“老虎”、“狮子”]
函数过滤器（）
{
var result2=[]；
document.getElementById（“demo”）.innerHTML=“”；
for（动物中的动物变量）
{
//将该值复制到可以操作的临时变量
这个动物=动物[动物]；
//检查是否选中了每个复选框，如果选中，变量中的值是否包含停止字符
//如果有，则清空temp变量
if（document.getElementById（'A'）.checked&&thisAnimal.indexOf（'A'）=-1）
这个动物=”；
if（document.getElementById（'E'）.checked&&thisAnimal.indexOf（'E'）=-1）
这个动物=”；
if（document.getElementById（'O'）.checked&&thisAnimal.indexOf（'O'）=-1）
这个动物=”；
//如果由于上述条件之一，temp变量不是空的，则将其附加到最终结果中
如果（thisAnimal.length>0）
结果2+=''+该动物；
document.getElementById（“demo”）.innerHTML=result2；
}
}
//调用函数以显示初始运行的结果
过滤器（）

排除带有“A”的单词

排除带有“E”的单词

排除带有“O”的单词

Animals[]数组未被修改。代码仅设置innerHTML。确保第一个复选框后的修改动物[]用于第二个复选框。如果您需要工作样品，请告诉我。谢谢。我现在就检查一下