Question

我有一个带有复选框的HTML表单，如下所示：

<form id="filterOptions" method="post" action="">
  <input type="checkbox" name="filterTaxi" id="filterTaxi" />
  <input type="checkbox" name="filterBicycle" id="filterBicycle" />
  <input type="checkbox" name="filterCarPark" id="filterCarPark" />
  <input type="checkbox" name="filterBed" id="filterBed" />
</form>

现在我想在更改复选框时使用javascript来应用函数。目前，当第一个复选框改变时，我可以应用一个函数：

document.getElementById('filterTaxi').onchange = function(){
  //do something here
};

所以我的问题是，如何避免为每个复选框编写代码，而是在更改任何复选框时触发函数？

Answer 1

您可以选择所有输入或添加课程，然后执行以下操作：

var input = document.getElementsByTagName('input');

for(var i = 0; i < input.length; i++) {
    input[i].onchange = function() {
         console.log(this);   
    }
 }

onchange函数对于所有这些函数都可以是相同的。

小提琴：http://jsfiddle.net/XgS9K/

Answer 2

所有元素。

document.getElementById('filterOptions').onchange = function(){
 alert()
 };

Answer 3

这将为您提供onchange处理程序，用于检查和取消选中checkbox es。

var allInputs = document.getElementsByTagName('input');
for (var i = 0; i < allInputs.length; i++) {
    if (allInputs[i].type == 'checkbox') {
        allInputs[i].onchange = function () {
            if (this.checked) {
                // your checked code here
                console.log('checked');
            } else {
                // your unchecked code here
                console.log('unchecked');
            }
        }
    }
}

DEMO http://jsfiddle.net/L324t/

更改任何复选框时应用功能

3 个答案: