Применить функцию, когда какие-либо флажки изменены

Question

Применить функцию, когда какие-либо флажки изменены

0

У меня есть 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
};

Итак, мой вопрос: как мне избежать написания этого для каждого флажка и вместо этого активировать функцию при изменении любого из этих флажков?

Coop 22 март 2014, в 00:58

Источник

0

Вы должны связать обработчик событий для каждого элемента, но все они могут ссылаться на одну и ту же функцию.
adeneo 21 март 2014, в 23:41

Теги:

javascript

html

forms

checkbox

3 ответа

0

Это даст вам onchange обработчик для проверки и сняв флажок из checkbox х годов.

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/

Arbel 21 март 2014, в 22:02

0

для всех элементов.

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

Fabian De Leon 21 март 2014, в 21:46

Ещё вопросы

Вы должны связать обработчик событий для каждого элемента, но все они могут ссылаться на одну и ту же функцию.

Jorg · Accepted Answer · 2014-03-21T21-27-00.000Z

Вы можете либо выбрать все входные данные, либо добавить класс и выполнить следующие действия:

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/

Отлично, спасибо! Это прекрасно работает
Я бы посоветовал добавить класс и выбрать все элементы с этим классом .. в противном случае вы бы выбрали ВСЕ входные данные, которые могут быть не тем, что вы хотите;)
Здорово. Я добавил немного к объявлению переменной 'input', чтобы сделать его более конкретным, используя ваш метод: document.getElementById('filterOptions').getElementsByTagName('input')