Nhận giá trị của Hộp kiểm HTML từ các sự kiện onclick / onchange

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

Từ bên trong onClickHandlervà / hoặc onChangeHandler, làm cách nào tôi có thể xác định trạng thái mới của hộp kiểm là gì?

Câu trả lời ngắn gọn:

Sử dụng clicksự kiện sẽ không kích hoạt cho đến khi giá trị được cập nhật và kích hoạt khi bạn muốn nó:

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

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

Ví dụ sống | Nguồn

Câu trả lời dài hơn:

Trình changexử lý sự kiện không được gọi cho đến khi checkedtrạng thái được cập nhật ( ví dụ trực tiếp | nguồn ), nhưng vì (như Tim Büthe chỉ ra trong các bình luận) IE không kích hoạt changesự kiện cho đến khi hộp kiểm mất tiêu điểm, bạn không nhận được thông báo chủ động. Tồi tệ hơn, với IE nếu bạn nhấp vào nhãn cho hộp kiểm (chứ không phải chính hộp kiểm) để cập nhật nó, bạn có thể có ấn tượng rằng bạn đang nhận được giá trị cũ (thử với IE ở đây bằng cách nhấp vào nhãn: ví dụ trực tiếp | nguồn ). Điều này là do nếu hộp kiểm có tiêu điểm, việc nhấp vào nhãn sẽ lấy tiêu điểm ra khỏi nó, kích hoạt changesự kiện với giá trị cũ và sau đóclickxảy ra cài đặt giá trị mới và đặt tiêu điểm trở lại vào hộp kiểm. Rất bối rối.

Nhưng bạn có thể tránh tất cả sự khó chịu đó nếu bạn sử dụng clickthay thế.

Tôi đã sử dụng trình xử lý DOM0 ( onxyzthuộc tính) vì đó là những gì bạn đã hỏi, nhưng đối với bản ghi, tôi thường khuyên bạn nên kết nối trình xử lý trong mã (DOM2 addEventListener, hoặc attachEventtrong các phiên bản IE cũ hơn) thay vì sử dụng onxyzthuộc tính. Điều đó cho phép bạn đính kèm nhiều trình xử lý vào cùng một phần tử và cho phép bạn tránh thực hiện tất cả các hàm xử lý của mình.

Một phiên bản trước của câu trả lời này đã sử dụng mã này cho handleClick:

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

Mục tiêu dường như là cho phép nhấp hoàn thành trước khi nhìn vào giá trị. Theo như tôi biết, không có lý do gì để làm điều đó, và tôi không biết tại sao tôi lại làm vậy. Giá trị được thay đổi trước khi clicktrình xử lý được gọi. Trong thực tế, thông số kỹ thuật khá rõ ràng về điều đó . Phiên bản không setTimeouthoạt động hoàn hảo trong mọi trình duyệt tôi đã thử (ngay cả IE6). Tôi chỉ có thể giả sử rằng tôi đã suy nghĩ về một số nền tảng khác mà sự thay đổi không được thực hiện cho đến sau sự kiện. Trong mọi trường hợp, không có lý do để làm điều đó với các hộp kiểm HTML.

Đối với React.js, bạn có thể làm điều này với mã dễ đọc hơn. Hy vọng nó giúp.

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

Dùng cái này

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

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

    //use this value

}
</script>