обработка событий в jQuery чекбокс

используйте событие change.

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

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

• прослушивание click событий checkboxes is не хорошая идея, поскольку это не позволит переключать клавиатуру или вносить изменения, где соответствие 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]
• подключение только для сопоставления элементов, существующих в момент регистрации события.

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

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

$('#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 отправьте событие change в тот же элемент с помощью trigger (не 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'))
 }
)

признавая тот факт, что asker специально запросил jQuery и что выбранный ответ правильный, следует отметить, что эта проблема на самом деле не нужно jQuery per say. Если кто-то хочет решить эту проблему без него, можно просто установить 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');
    }
});