更改事件Javascript的复选框

Question

In my page I have an array of string and in my script I have a function that excludes the strings that contain certain char.

I control it through 3 check boxes.

I have the functions to do this but my problem is when I check two check boxes one to exclude the strings containing 'a' and one containing 'e'. I get the result of the last checked check box.

How to make a function that will handle all the check boxes and show me the final result.

This is what I have so far :

My 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;
      }
    }
}

Answer 1

Because whatever changes was done by the previous checks are overridden by the last if block if it is checked

 var animals = ["Bear", "Mouse", "Cat", "Tiger", "Lion"]; function filter() { var a = document.getElementById('A').checked, e = document.getElementById('E').checked, o = document.getElementById('O').checked, result2; //make a copy result2 = animals.filter(function(value) { value = value.toLowerCase(); return (!a || value.indexOf('a') == -1) && (!e || value.indexOf('e') == -1) && (!o || value.indexOf('o') == -1); }) document.getElementById("demo").innerHTML = result2; } filter(); 

 <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> </div> 

Answer 2

Below logic code should work fine

 var Animals = ["Bear", "Mouse", "Cat", "Tiger", "Lion"] function filter () { var result2 = []; document.getElementById("demo").innerHTML = ""; for (var animal in Animals) { //Copy the value to a temp variable which you can manipulate thisAnimal = Animals[animal]; //Check if each check-box is checked and if so, does the value in variable contains the stop-character //If it has, blank out the temp variable if (document.getElementById('A').checked && thisAnimal.indexOf('a') == -1) thisAnimal = ""; if (document.getElementById('E').checked && thisAnimal.indexOf('e') == -1) thisAnimal = ""; if (document.getElementById('O').checked && thisAnimal.indexOf('o') == -1) thisAnimal = ""; //If the temp variable is not blank, due to one of the above conditions, then append it to the final result if(thisAnimal.length > 0) result2 += " " + thisAnimal; document.getElementById("demo").innerHTML = result2; } } // Call the function to display the result for the initial run filter (); 

 <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> </div>