更改事件 Javascript 上的复选框答案

【问题标题】：Checkbox on change event Javascript更改事件 Javascript 上的复选框
【发布时间】：2015-05-12 12:01:58
【问题描述】：

在我的页面中，我有一个字符串数组，在我的脚本中，我有一个函数可以排除包含特定字符的字符串。

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

【问题讨论】：

Animals[] 数组未被修改。代码只是设置innerHTML。确保在第一个复选框用于第二个复选框之后修改了 Animals[]。如果您需要工作样本，请告诉我。

标签： javascript checkbox onchange

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

【讨论】：

【解决方案2】：

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

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>

【讨论】：

谢谢，我现在去看看