Обробка події прапорець 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подію.

• Використовуйте псевдоселектор 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: Це повільніше?

Відповідь: Поки події відбуваються зі швидкістю взаємодії з користувачем, вам не потрібно турбуватися про незначну різницю швидкості між делегованим обробником подій та безпосередньо підключеним обробником. Переваги делегації значно перевищують будь-який незначний недолік. Делеговані обробники подій насправді швидше реєструються, оскільки вони зазвичай підключаються до одного відповідного елемента.

Чому не 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
  }
}

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

Я спробував код з першої відповіді, він не працює, але я граю, і це працює для мене

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