<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
如何从onClickHandler和/或onChangeHandler范围内确定复选框的新状态？
<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
如何从onClickHandler和/或onChangeHandler范围内确定复选框的新状态？
The short answer:
使用click事件，该事件在值更新后才会触发，并在需要时触发:
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
The longer answer:
change事件处理程序在checked状态更新(live example | source)之前不会被调用，但因为(正如Tim BüThe在 comments 中指出的)IE在复选框失go 焦点之前不会触发change事件，所以您不会主动收到通知.更糟糕的是，在IE中，如果你点击label作为复选框(而不是复选框本身)来更新它，你会得到一种印象，认为你得到的是旧值(点击标签:live example | source，在IE中try 一下).这是因为如果复选框有焦点，单击标签会将焦点从其上移开，用旧值触发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的版本在我try 过的所有浏览器(甚至IE6)中都运行良好.我只能假设我在考虑某个other平台，该平台直到活动结束后才进行更改.在任何情况下，都没有理由使用HTML复选框.