2015-05-12 26 views
0

在我的页面中我有一个字符串数组,并在我的脚本中有一个函数排除了包含某些字符的字符串。关于更改事件的复选框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; 
     } 
    } 
} 
+0

的动物[]数组是没有得到修正。代码只是设置innerHTML。确保第一个复选框用于第二个复选框后,确保已修改动物[]。让我知道你是否需要工作样本。 –

回答

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>

+0

http://jsfiddle.net/arunpjohny/03avr1vh/2/ –

1

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

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>

+0

谢谢我现在将检查它 – Besa

+0

它不起作用。是一样的 – Besa

+0

检查更新的答案。让我知道你是否需要任何帮助。 –