Dapatkan nilai HTML Checkbox dari onclick / onchange events


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

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

Jawaban:


383

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.


6
Untungnya onchangeberfungsi dengan benar di +IE9. Sumber
Mori

Menambahkan 2 sen saya di sini: Tampaknya IE8 (dan di bawah ini, saya asumsikan), membedakan antara klik ke bawah dan rilis klik ... dan alasan kami berada di halaman ini adalah karena ia menyala saat klik ke bawah alih-alih klik melepaskan. Sepertinya kotak centang hanya aktif pada rilis klik - mengklik ke bawah dan kemudian menggerakkan tetikus akan mendaftarkan klik, tetapi tidak mengubah kotak centang.
dah97765

2
Sepertinya mengaktifkan kotak centang melalui navigasi keyboard ( tab+ space) juga akan memicu onclickpenangan (setidaknya diverifikasi di Chrome 51).
Nate Whittaker

Bagaimana cara mendapatkan nilai dari kotak centang itu pada klik itu ??
user7350714

12

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

8

Gunakan ini

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

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

    //use this value

}
</script>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.