HTML onay kutusunun değerini onclick / onchange olaylarından alma

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />

İçeriden onClickHandlerve / veya onChangeHandler, onay kutusunun yeni durumunun ne olduğunu nasıl belirleyebilirim?

Kısa cevap:

clickDeğer güncelleninceye kadar tetiklenmeyecek ve istediğiniz zaman tetiklenecek etkinliği kullanın :

<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>

function handleClick(cb) {
  display("Clicked, new value = " + cb.checked);
}

Canlı örnek | Kaynak

Daha uzun cevap:

changeKadar olay işleyicisi çağrılmaz checkeddevlet güncellendi ( canlı örneği | kaynak ), ancak IE patlamaz (Tim Büthe açıklamalarda işaret ettiği gibi) nedeniyle changeonay kutusu odağı kaybedinceye kadar olay, sen alamadım proaktif bildirim. Daha da kötüsü, IE'yi güncellemek için onay kutusunun (onay kutusunun kendisi yerine) bir etiketine tıklarsanız , eski değeri aldığınız izlenimini edinebilirsiniz (etiketi tıklayarak IE ile deneyin: live example | kaynak ). Bunun nedeni, onay kutusunun odağı varsa, etiketi tıklatmak odağı ondan uzaklaştırır, changeetkinliği eski değerle tetikler ve ardındanclickyeni değeri ayarlar ve odağı onay kutusuna geri getirir. Çok kafa karıştırıcı.

Ancak clickbunun yerine kullanırsanız, tüm bu tatsızlıklardan kaçınabilirsiniz .

DOM0 işleyicilerini ( onxyzöznitelikleri) kullandım, çünkü bu sizin sorduğunuz şeydi, ancak kayıt için genellikle işleyicileri öznitelikleri kullanmak yerine kodda (DOM2'ler addEventListenerveya IE'nin attachEventeski sürümlerinde) takmanızı öneririm onxyz. Bu, aynı öğeye birden çok işleyici eklemenizi ve tüm işleyicilerinizin genel işlevlerini yapmaktan kaçınmanızı sağlar.

Bu cevabın önceki bir sürümü şu kodu kullandı handleClick:

function handleClick(cb) {
  setTimeout(function() {
    display("Clicked, new value = " + cb.checked);
  }, 0);
}

Hedef, değere bakmadan önce tıklamanın tamamlanmasına izin vermek gibiydi. Bildiğim kadarıyla bunu yapmak için hiçbir neden yok ve neden yaptığım hakkında hiçbir fikrim yok. Değer, clickişleyici çağrılmadan önce değiştirilir . Aslında, spesifikasyon bu konuda oldukça açık . Olmadan sürüm setTimeoutdenedim her tarayıcıda (hatta IE6) mükemmel çalışıyor. Sadece değişikliğin olayın sonrasına kadar yapılmadığı başka bir platform düşündüğümü varsayabilirim . Her durumda, bunu HTML onay kutuları ile yapmak için bir neden yoktur.

React.js için bunu daha okunabilir kodlarla yapabilirsiniz. Umarım yardımcı olur.

handleCheckboxChange(e) {
  console.log('value of checkbox : ', e.target.checked);
}
render() {
  return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}

Bunu kullan

<input type="checkbox" onclick="onClickHandler()" id="box" />

<script>
function onClickHandler(){
    var chk=document.getElementById("box").value;

    //use this value

}
</script>