jQuery onay kutusu olayı işleme

Şunlara sahibim:

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

Oluşan herhangi bir kontrol olayını yakalamak myformve hangi onay kutusunun değiştirildiğini (ve açık veya kapalı olarak değiştirilip değiştirilmediğini bilmek) jQuery'i nasıl kullanabilirim?

$('#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 olayını kullanın.

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

Birkaç yararlı cevap var, ancak hiçbiri en son seçenekleri kapsamıyor gibi görünüyor . Bu amaçla tüm örneklerim, eşleşen labelöğelerin varlığına da hitap eder ve ayrıca dinamik olarak onay kutuları eklemenize ve sonuçları bir yan panelde (yeniden yönlendirerek console.log) görmenize izin verir .

• Dinleme clickile ilgili olayların checkboxesolduğu değil o klavye toggle için veya eşleşen bir yerde yapılan değişiklikler için izin vermeyecektir olarak iyi bir fikir labelelemanı tıklandığı. Daima changeetkinliği dinleyin .

• Bunun :checkboxyerine jQuery sözde seçici kullanın input[type=checkbox]. :checkboxdaha kısa ve daha okunabilir.

• Bir onay kutusunun işaretli olup olmadığını test etmek için is()jQuery :checkedsözde seçici ile kullanın . Bunun tüm tarayıcılarda çalışacağı garanti edilir.

Mevcut öğelere bağlı temel olay işleyici:

$('#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/

Notlar:

• :checkboxKullanmayı tercih eden seçiciyi kullanırinput[type=checkbox]
• Bu yalnızca etkinliğin kaydedildiği sırada var olan eşleşen öğelere bağlanır .

Ata öğesine eklenmiş yetki verilen olay işleyicisi:

Yetki verilen olay işleyicileri, öğelerin henüz bulunamayabileceği (dinamik olarak yüklenmiş veya oluşturulmuş) durumlar için tasarlanmıştır ve çok yararlıdır. Onlar temsilci ata elemanın (bu nedenle dönem) sorumluluğu.

$('#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/

Notlar:

• Bu, changedeğişmeyen bir ata elemanına (bu durumda #myform) patlamak için olayları (bu durumda ) dinleyerek çalışır .
• Daha sonra jQuery seçiciyi ( ':checkbox'bu durumda) yalnızca kabarcık zincirindeki elemanlara uygular .
• Daha sonra olay işleyici işlevini yalnızca olaya neden olan eşleşen öğelere uygular.
• documentBaşka hiçbir şey daha yakın / uygun değilse, yetki verilen olay işleyicisini bağlamak için varsayılan olarak kullanın .
• bodyYetki verilen olayları eklemek için kullanmayın , çünkü fare olaylarını almasını durdurabilecek bir hata vardır (stil ile ilgili).

Temsilci işleyicilerin sonucu, eşleşen öğelerin olay işleyicisinin kaydedildiği zaman değil, yalnızca olay zamanında olması gerektiğidir. Bu, dinamik olarak eklenen içeriğin olayları oluşturmasına izin verir.

S: Daha yavaş mı?

Y: Olaylar kullanıcı etkileşimi hızlarında olduğu sürece, yetki verilen bir olay işleyicisi ile doğrudan bağlı bir işleyici arasındaki önemsiz hız farkı konusunda endişelenmenize gerek yoktur . Delegasyonun faydaları küçük bir dezavantajdan çok daha ağır basmaktadır. Yetki verilen olay işleyicileri, genellikle tek bir eşleşen öğeye bağlandıkları için kaydolmak daha hızlıdır .

Neden gelmez prop('checked', true)yangın changeolayı?

Bu aslında tasarım gereğidir. Eğer olayı başlatırsa, sonsuz güncellemeler durumuna kolayca girersiniz. Bunun yerine, işaretli özelliği değiştirdikten sonra aynı öğeye trigger(not triggerHandler) kullanarak bir change olayı gönderin :

örneğin triggerhiçbir olay olmazsa

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

örneğin triggernormal değişiklik olayı yakalandığında

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

Notlar:

• triggerHandlerBir kullanıcı tarafından önerilen şekilde kullanmayın , çünkü etkinlikleri yetki verilen bir olay işleyicisine aktarmaz.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

o halde olacak bir olay işleyicisi için işe doğrudan bağlı elemana:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

.TriggerHandler () ile tetiklenen olaylar DOM hiyerarşisini patlatmaz; hedef eleman tarafından doğrudan ele alınmazlarsa hiçbir şey yapmazlar.

Referans: http://api.jquery.com/triggerhandler/

Herkesin bu kapsamda olmadığını düşündüğü ek özellikleri varsa, lütfen eklemeyi önerin .

JQuery (1.7) 'de yeni' on 'yöntemini kullanarak: http://api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });

• olay işleyici devam edecek
• onay kutusu klavye ile değiştirildiyse yakalanır, sadece tıklayın

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

Askerin özellikle jQuery talep ettiğini ve seçilen cevabın doğru olduğunu kabul ederek, bu sorunun aslında jQuery'ye ihtiyaç duymadığına dikkat edilmelidir . Bu sorunu onsuz çözmek onClickisterse, ek işlevsellik eklemek istediği onay kutularının niteliğini şöyle ayarlayabilirsiniz :

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
  }
}

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

İlk cevaptan kodu denedim, çalışmıyor ama etrafta oynuyorum ve bu benim için çalışıyor

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