[英]Checkbox on change event 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;
}
}
}
因為以前的檢查所做的任何更改都被最后的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>
下面的邏輯代碼應該可以正常工作
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.