从onclick / onchange事件获取HTML复选框的值 [英] Getting value of HTML Checkbox from onclick/onchange events

问题描述

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

从 onClickHandler 和/或 onChangeHandler ，如何确定复选框的新状态？

From within onClickHandler and/or onChangeHandler, how can I determine whether the new state of the checkbox?

推荐答案

简短答案

使用点击事件，不会触发，直到在值更新后，当您想要更新时触发：

Use the click event, which won't fire until after the value has been updated, and fires when you want it to:

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

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

实例 | 来源

较长的答案：

更改事件处理程序在检查状态已更新（实例 | 源），但是因为（如TimBüthe在评论中指出的），IE不会触发更改事件，直到复选框失去焦点，你请勿主动取得通知。更糟糕的是，如果您点击了复选框（而不是复选框本身）的标签来更新它，则可以获得您获得旧值的印象（尝试使用IE点击标签：实例 | 源）。这是因为如果复选框具有焦点，则单击标签会将焦点从其中移开，使用旧值触发更改事件，然后再将点击设置新值并将焦点设置在复选框上。非常混乱。

The change event handler isn't called until the checked state has been updated (live example | source), but because (as Tim Büthe points out in the comments) IE doesn't fire the change event until the checkbox loses focus, you don't get the notification proactively. Worse, with IE if you click a label for the checkbox (rather than the checkbox itself) to update it, you can get the impression that you're getting the old value (try it with IE here by clicking the label: live example | source). This is because if the checkbox has focus, clicking the label takes the focus away from it, firing the change event with the old value, and then the click happens setting the new value and setting focus back on the checkbox. Very confusing.

但是，如果您使用单击，您可以避免所有这些不愉快。

But you can avoid all of that unpleasantness if you use click instead.

我已经使用DOM0处理程序（ onxyz 属性），因为这是你问的，但为了记录，我一般会建议挂钩代码中的处理程序（DOM2的 addEventListener 或 attachEvent 在旧版本的IE中），而不是使用 onxyz 属性。这可以让多个处理程序附加到同一个元素，并且可以避免使所有处理程序的全局功能。

I've used DOM0 handlers (onxyz attributes) because that's what you asked about, but for the record, I would generally recommend hooking up handlers in code (DOM2's addEventListener, or attachEvent in older versions of IE) rather than using onxyz attributes. That lets you attach multiple handlers to the same element and lets you avoid making all of your handlers global functions.

这个答案的版本使用这个代码 handleClick ：

An earlier version of this answer used this code for handleClick:

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

目标似乎是允许点击完成，然后再看价值。据我所知，没有理由这样做，我不知道为什么我这样做。在调用点击处理程序之前，该值已更改。实际上，该规范是相当清楚的。没有 setTimeout 的版本在我尝试过的每个浏览器（甚至IE6）中运行良好。我只能假设我正在考虑一些其他平台，直到事件发生后才进行更改。无论如何，没有理由使用HTML复选框。

The goal seemed to be to allow the click to complete before looking at the value. As far as I'm aware, there's no reason to do that, and I have no idea why I did. The value is changed before the click handler is called. In fact, the spec is quite clear about that. The version without setTimeout works perfectly well in every browser I've tried (even IE6). I can only assume I was thinking about some other platform where the change isn't done until after the event. In any case, no reason to do that with HTML checkboxes.

这篇关于从onclick / onchange事件获取HTML复选框的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！