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

использовать событие change.

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

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

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

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

признавая тот факт, что Аскер специально запросил 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');
    }
});