обработка событий флажка jQuery

Имею следующее:

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

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

$('#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
    }
});

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

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

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

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

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

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

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

$('#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: Это медленнее?

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

Почему не 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/

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

Использование нового метода 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);

    });

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

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

Признавая тот факт, что спрашивающий специально запросил 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
  }
}

Скрипка: http://jsfiddle.net/Y9f66/1/

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

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