简短的回答：

使用该click事件，该事件在值更新后才会触发，并在您需要时触发：

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

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

活生生的例子| 来源

更长的答案：

该change事件处理函数不是调用，直到checked状态已经更新（活生生的例子|源），但因为（蒂姆·布泰在评论中指出）IE不火change，直到选框失去焦点的事件，你没有得到主动通知。更糟糕的是，在 IE 中，如果您单击复选框的标签（而不是复选框本身）来更新它，您会得到获得旧值的印象（通过单击标签在 IE 中尝试：live example |来源）。这是因为如果复选框有焦点，单击标签会将焦点从它移开，change使用旧值触发事件，然后click发生设置新值并将焦点设置回复选框。很混乱。

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

我已经使用了 DOM0 处理程序（onxyz属性），因为这就是您所问的，但为了记录，我通常建议在代码（DOM2addEventListener或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>