Управление событиями jQuery

У меня есть следующее:

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

Как использовать jQuery для захвата какого-либо события проверки в myform и указать, какой флажок был переключен (и знать, было ли оно включено или выключено)?

ОТВЕТЫ

Ответ 1

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

Ответ 2

Используйте событие изменения.

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

Ответ 3

Есть несколько полезных ответов, но ни один из них не охватывает все последние варианты. С этой целью все мои примеры также обеспечивают наличие совпадающих элементов label, а также позволяют динамически добавлять флажки и видеть результаты на боковой панели (путем перенаправления console.log).

  • Прослушивание событий click на checkboxes не является хорошей идеей, так как это не позволит переключать клавиатуру или изменения, сделанные при нажатии соответствующего элемента label. Всегда слушайте событие change.

  • Используйте псевдо-селектор jQuery :checkbox, а не input[type=checkbox]. :checkbox короче и читабельнее.

  • Используйте is() с псевдоселектором jQuery :checked, чтобы проверить, установлен ли флажок. Это гарантированно работает во всех браузерах.

Основной обработчик событий, прикрепленный к существующим элементам:

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

Примечания:

  • Использует селектор :checkbox, который предпочтительнее использовать input[type=checkbox]
  • Это связано только с соответствующими элементами, которые существовали во время регистрации события.

Делегированный обработчик событий, прикрепленный к элементу предка:

Делегированные обработчики событий предназначены для ситуаций, когда элементы могут еще не существовать (динамически загружаться или создаваться) и очень полезны. Они делегируют ответственность за элемент предка (отсюда и этот термин).

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

Примечания:

  • Это работает, слушая события (в данном случае change), чтобы пузыриться до не изменяющегося элемента предка (в данном случае #myform).
  • Затем он применяет селектор jQuery (':checkbox' в этом случае) только к элементам в цепочке пузырьков.
  • Затем он применяет функцию обработчика событий только к тем элементам, которые вызвали событие.
  • Используйте document как по умолчанию для подключения делегированного обработчика событий, если ничего более близкого/удобного.
  • Не используйте body для присоединения делегированных событий, так как у него есть ошибка (в том числе при стилизации), которая может остановить его получение событий мыши.

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

Q: медленнее?

A: Пока события на скорости взаимодействия с пользователем, вам не нужно беспокоиться о незначительной разнице в скорости между обработанным делегированным обработчиком событий и напрямую связанным обработчиком. Преимущества делегирования намного превосходят любые незначительные недостатки. Делегированные обработчики событий на самом деле быстрее регистрируются, поскольку они обычно подключаются к одному совпадающему элементу.

Почему prop('checked', true) не запускает событие change?

Это на самом деле по дизайну. Если бы это произошло, вы легко попали в ситуацию бесконечных обновлений. Вместо этого, изменив свойство checked, отправьте событие изменения в тот же элемент, используя trigger (not triggerHandler):

например. без trigger событий не происходит

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

например. с trigger происходит событие нормального изменения

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

Примечания:

  • Не используйте triggerHandler, как было предложено одним пользователем, так как он не будет создавать пузырьки событий для делегированного обработчика событий.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

хотя он будет работать для обработчика события, непосредственно связанного с элементом:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

События, инициированные с помощью .triggerHandler(), не создают пузырьковую иерархию DOM; если они не обрабатываются целевым элементом напрямую, они ничего не делают.

Ссылка: http://api.jquery.com/triggerhandler/

Если у кого есть дополнительные функции, которые, по их мнению, не покрываются этим, пожалуйста, предложите дополнения.

Ответ 4

Использование нового метода 'on' в jQuery (1.7): http://api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });
  • обработчик событий будет жить
  • будет отображаться, если флажок был изменен с помощью клавиатуры, а не просто нажмите

Ответ 5

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

Ответ 6

Признавая тот факт, что запрашивающий специально запросил jQuery и что выбранный ответ верен, следует отметить, что эта проблема на самом деле не нужна нужна jQuery за отзыв. Если кто-то хочет решить эту проблему без него, можно просто установить атрибут onClick флажков, которые он или она хочет добавить к ним, например:

HTML:

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

JavaScript:

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

Fiddle: http://jsfiddle.net/Y9f66/1/

Ответ 7

Я попробовал код от первого ответа, он не работает, но у меня есть игра, и эта работа для меня

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});