關於更改事件的複選框Javascript

Question

在我的頁面中我有一個字符串數組，並在我的腳本中有一個函數排除了包含某些字符的字符串。

我通過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; 
     } 
    } 
} 

Answer 1

因爲任何的變化是由以前的檢查由過去的if塊被覆蓋完成，如果檢查

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

下面邏輯代碼應該正常工作

var Animals = ["Bear", "Mouse", "Cat", "Tiger", "Lion"] 
 

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