<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
在onClickHandler
和/或onChangeHandler
中,我如何确定复选框的新状态是什么?
简短的回答:
使用 "click "事件,该事件在值被更新后才会发生,并在你想发生时发生。
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
较长的答案:
变化 "事件处理程序在 "选中 "状态被更新之前不会被调用(实时示例 | 来源),但由于(正如Tim Bü在评论中指出的)IE在复选框失去焦点之前不会触发 "变化 "事件,你不会主动得到通知。更糟的是,在IE中,如果你点击复选框的*标签(而不是复选框本身)来更新它,你会觉得你得到的是旧的值(通过点击标签在IE中尝试:现场示例 | 来源)。这是因为如果复选框有焦点,点击标签就会把焦点从它身上移开,用旧值触发 "change "事件,然后 "click "发生,设置新值,并把焦点放回复选框上。非常令人困惑。
但如果你用click
代替,就可以避免所有这些不愉快的事情。
我使用了DOM0处理程序(onxyz
属性),因为你问的是这个问题,但为了记录在案,我通常建议在代码中连接处理程序(DOM2的addEventListener
,或IE旧版本的attachEvent
),而不是使用onxyz
属性。这可以让你在同一个元素上附加多个处理程序,并让你避免将所有的处理程序变成全局函数。
本答案的早期版本在handleClick
中使用了这段代码。
function handleClick(cb) {
setTimeout(function() {
display("Clicked, new value = " + cb.checked);
}, 0);
}
其目的似乎是让点击完成后再看值。据我所知,没有理由这么做,我也不知道为什么这么做。在调用 "点击 "处理程序之前,值已经改变。事实上,规范是很清楚的。没有`setTimeout'的版本在我试过的所有浏览器中都运行得很好(甚至是IE6)。我只能假设我考虑的是其他**平台,在那里直到事件发生后才进行更改。在任何情况下,都没有理由对HTML复选框这样做。