รับค่าของช่องทำเครื่องหมาย HTML จากเหตุการณ์ onclick / onchange

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

จากภายในonClickHandlerและ / หรือonChangeHandlerฉันจะทราบได้อย่างไรว่าสถานะใหม่ของช่องทำเครื่องหมายคืออะไร

คำตอบสั้น ๆ :

ใช้clickเหตุการณ์ซึ่งจะไม่เริ่มทำงานจนกว่าจะมีการอัปเดตค่าแล้วและจะยิงเมื่อคุณต้องการ:

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

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

ตัวอย่างสด | แหล่ง

คำตอบอีกต่อไป:

changeจัดการเหตุการณ์ไม่ได้เรียกว่าจนกระทั่งcheckedรัฐได้รับการปรับปรุง ( ตัวอย่างสด | แหล่งที่มา ) แต่เนื่องจาก (ทิม Buthe ชี้ให้เห็นในความคิดเห็น) IE ไม่ได้ยิงchangeกิจกรรมจนกว่าช่องสูญเสียโฟกัส, คุณไม่ได้รับ การแจ้งเตือนในเชิงรุก ยิ่งแย่ไปกว่านั้นถ้าคุณคลิกที่ป้ายกำกับสำหรับช่องทำเครื่องหมาย (แทนที่จะเป็นช่องทำเครื่องหมาย) เพื่ออัปเดตคุณจะได้รับความประทับใจว่าคุณได้รับคุณค่าเก่า (ลองใช้กับ IE ที่นี่โดยคลิกที่ป้ายกำกับ: live example | แหล่งที่มา ) นี่เป็นเพราะหากช่องทำเครื่องหมายมีโฟกัสการคลิกที่ป้ายจะเป็นการโฟกัสออกไปจากนั้นเริ่มchangeเหตุการณ์ด้วยค่าเก่าจากนั้นคลิกclickเกิดขึ้นการตั้งค่าใหม่และการตั้งค่าโฟกัสกลับไปที่ช่องทำเครื่องหมาย สับสนมาก

แต่คุณสามารถหลีกเลี่ยงความไม่พอใจทั้งหมดได้หากคุณใช้clickแทน

ฉันใช้ตัวจัดการ DOM0 ( onxyzคุณสมบัติ) เพราะนั่นคือสิ่งที่คุณถามเกี่ยวกับ แต่สำหรับบันทึกฉันมักจะแนะนำการเชื่อมโยงตัวจัดการในรหัส (DOM2 addEventListenerหรือattachEventใน IE รุ่นเก่า) แทนที่จะใช้onxyzคุณลักษณะ ซึ่งช่วยให้คุณสามารถติดตั้งตัวจัดการหลายตัวในองค์ประกอบเดียวกันและช่วยให้คุณหลีกเลี่ยงการสร้างฟังก์ชั่นทั้งหมดของตัวจัดการทั่วโลก

รุ่นก่อนหน้าของคำตอบนี้ใช้รหัสนี้สำหรับhandleClick:

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

เป้าหมายดูเหมือนจะอนุญาตให้คลิกเสร็จก่อนที่จะดูค่า เท่าที่ฉันทราบไม่มีเหตุผลที่จะทำเช่นนั้นและฉันก็ไม่รู้ว่าทำไมฉันถึงทำ ค่าจะถูกเปลี่ยนก่อนที่clickจะเรียกใช้ตัวจัดการ ในความเป็นจริงสเปคคือค่อนข้างชัดเจนเกี่ยวกับว่า รุ่นที่ใช้setTimeoutงานได้ไม่สมบูรณ์ในเบราว์เซอร์ทุกตัวที่ฉันได้ลอง (แม้แต่ IE6) ฉันคาดเดาได้แค่ว่าฉันกำลังคิดเกี่ยวกับแพลตฟอร์มอื่น ๆที่การเปลี่ยนแปลงไม่ได้ดำเนินการจนกระทั่งหลังจากเหตุการณ์ ไม่ว่าในกรณีใด ๆ ไม่มีเหตุผลที่จะทำเช่นนั้นกับช่องทำเครื่องหมาย HTML

สำหรับ React.js คุณสามารถทำได้ด้วยรหัสที่อ่านง่ายขึ้น หวังว่ามันจะช่วย

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

ใช้สิ่งนี้

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

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

    //use this value

}
</script>