javascript - 从 onclick/onchange 事件中获取 HTML Checkbox 的值

Question

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

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

Answer 1

简短回答:

使用 click 事件，直到值更新后才会触发，并在您希望时触发:

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

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

Live example | Source

更长的答案:

在 checked 状态更新(live example | source)之前，不会调用 change 事件处理程序，但是因为(正如 Tim Büthe 指出的那样在评论中)IE 不会触发 change 事件，直到复选框失去焦点，您不会主动收到通知。更糟糕的是，使用 IE 如果您单击复选框的 标签 (而不是复选框本身)来更新它，您可能会觉得您正在获取旧值(在此处使用 IE 尝试点击标签:live example|source)。这是因为如果复选框有焦点，单击标签会将焦点从它身上移开，使用旧值触发 change 事件，然后 click 发生设置新值值并将焦点重新放在复选框上。非常困惑。

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

我使用了 DOM0 处理程序(onxyz 属性)，因为这是您所问的，但为了记录，我通常建议在代码中连接处理程序(DOM2 的 addEventListener 或旧版本 IE 中的 attachEvent)而不是使用 onxyz 属性。这使您可以将多个处理程序附加到同一个元素，并避免将所有处理程序设为全局函数。

---

此答案的早期版本将此代码用于 handleClick:

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

目标似乎是在查看值之前让点击完成。据我所知，没有理由这样做，我也不知道我为什么这样做。在调用 click 处理程序之前更改该值。事实上，规范是quite clear about that .没有 setTimeout 的版本在我尝试过的每个浏览器(甚至 IE6)中都运行良好。我只能假设我正在考虑一些 other 平台，直到事件发生后才进行更改。无论如何，没有理由使用 HTML 复选框来这样做。