обработка событий в jQuery чекбокс
у меня есть следующие:
<form id="myform">
<input type="checkbox" name="check1" value="check1">
<input type="checkbox" name="check2" value="check2">
</form>
Как использовать jQuery для захвата любой Регистрация событий, происходящих в myform
и скажите, какой флажок был включен (и знаете, был ли он включен или выключен)?
7 ответов
$('#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
}
});
используйте событие 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);
});
- обработчик событий будет жить на
- захватит, если флажок был изменен клавиатурой, а не просто нажмите
признавая тот факт, что 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');
}
});