Dapatkan nilai HTML Checkbox dari onclick / onchange events

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

Dari dalam onClickHandlerdan / atau onChangeHandler, bagaimana saya bisa menentukan keadaan baru kotak centang itu?

Jawaban singkatnya:

Gunakan clickacara, yang tidak akan menyala sampai setelah nilai diperbarui, dan diaktifkan saat Anda menginginkannya:

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

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

Contoh langsung | Sumber

Jawaban yang lebih panjang:

Pengatur changekejadian tidak dipanggil sampai checkedkeadaan telah diperbarui ( contoh langsung | sumber ), tetapi karena (seperti yang ditunjukkan Tim Büthe di komentar) IE tidak memecat changeacara sampai kotak centang kehilangan fokus, Anda tidak mendapatkan pemberitahuan secara proaktif. Lebih buruk lagi, dengan IE jika Anda mengklik label untuk kotak centang (bukan kotak centang itu sendiri) untuk memperbaruinya, Anda bisa mendapatkan kesan bahwa Anda mendapatkan nilai lama (coba dengan IE di sini dengan mengklik label: live example | sumber ). Ini karena jika kotak centang memiliki fokus, mengklik label menjauhkan fokus darinya, menembakkan changeacara dengan nilai lama, dan kemudianclickterjadi pengaturan nilai baru dan pengaturan fokus kembali pada kotak centang. Sangat membingungkan.

Tapi Anda bisa menghindari semua ketidaknyamanan itu jika Anda menggunakannya click.

Saya telah menggunakan penangan DOM0 ( onxyzatribut) karena itulah yang Anda tanyakan, tetapi sebagai catatan, saya biasanya akan merekomendasikan mengaitkan penangan dalam kode (DOM2 addEventListener, atau attachEventdalam versi IE yang lebih lama) daripada menggunakan onxyzatribut. Itu memungkinkan Anda melampirkan banyak penangan ke elemen yang sama dan memungkinkan Anda menghindari membuat semua fungsi penangan Anda menjadi global.

Versi sebelumnya dari jawaban ini menggunakan kode ini untuk handleClick:

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

Tujuannya adalah untuk memungkinkan klik untuk menyelesaikan sebelum melihat nilainya. Sejauh yang saya ketahui, tidak ada alasan untuk melakukan itu, dan saya tidak tahu mengapa saya melakukannya. Nilai diubah sebelum clickpawang dipanggil. Bahkan, speknya cukup jelas tentang itu . Versi tanpa setTimeoutberfungsi dengan baik di setiap browser yang saya coba (bahkan IE6). Saya hanya bisa berasumsi saya sedang memikirkan platform lain di mana perubahan tidak dilakukan sampai setelah acara. Bagaimanapun, tidak ada alasan untuk melakukan itu dengan kotak centang HTML.

Untuk React.js, Anda dapat melakukan ini dengan kode yang lebih mudah dibaca. Semoga ini bisa membantu.

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

Gunakan ini

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

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

    //use this value

}
</script>