javascript - 从onclick / onchange事件中获取HTML Checkbox的价值(Getting value of HTML Checkbox from onclick/onchange events)

Question

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

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

  ask by Maxim Gershkovich translate from so

Answer 1

The short answer:

(简短的回答：)

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

(使用click事件，在更新值之前不会触发，并在您希望它时触发：)

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

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

Live example |

(实例 |)

Source

(资源)

The longer answer:

(答案越长：)

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.

(change事件处理程序在更新已checked状态（ 实例 | 源代码 ）之前不会被调用，但是因为（正如TimBüthe在注释中指出的那样）IE不会触发change事件，直到复选框失去焦点，您不会不能主动收到通知。)

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 ).

(更糟糕的是，如果你点击复选框的标签 （而不是复选框本身）来更新它，你可以得到你得到旧值的印象（通过点击标签在这里尝试使用IE： live example | 来源 ）。)

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.

(这是因为如果复选框具有焦点，则单击标签会使焦点远离它，使用旧值触发change事件，然后click发生设置新值并将焦点设置回复选框。)

Very confusing.

(很混乱。)

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

(但是，如果您使用click ，则可以避免所有这些不愉快。)

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.

(我使用过DOM0处理程序（ onxyz属性），因为这就是你所要求的，但是对于记录，我通常会建议在代码中加入处理程序（DOM2的addEventListener ，或旧版本的IE中的attachEvent ），而不是使用onxyz属性。)

That lets you attach multiple handlers to the same element and lets you avoid making all of your handlers global functions.

(这允许您将多个处理程序附加到同一元素，并允许您避免使所有处理程序全局函数。)

---

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

(此答案的早期版本将此代码用于handleClick ：)

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

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.

(在调用click处理程序之前更改该值。)

In fact, the spec is quite clear about that .

(事实上，规范很明确 。)

The version without setTimeout works perfectly well in every browser I've tried (even IE6).

(没有setTimeout的版本在我尝试的每个浏览器中都能很好地工作（甚至是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.

(无论如何，没有理由使用HTML复选框。)