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

onClickHandler 和/或 onChangeHandler 中,如何确定复选框的新状态?



解决方法

简短回答:

使用点击事件,该事件不会触发,直到该值已更新,并触发时,您希望它:

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

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

实例 | 来源

较长的答案:

更改事件处理程序在检查状态更新之前不会被调用( live example | ),但是因为(正如TimBüthe在评论中指出的)IE doesn' t fire the change event直到复选框失去焦点,你不会主动获得通知.更糟的是,如果您单击复选框(而不是复选框本身)的标签来更新IE,则可以获得您获得旧值的印象(使用IE尝试点击标签:实例 | 源代码).这是因为,如果复选框有焦点,点击标签使焦点远离它,触发与旧值的更改事件,然后点击值并将重点设置为复选框.很混乱.

但你可以避免所有的不愉快,如果你使用点击.

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


此回答的早期版本使用此代码 handleClick :

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

目标似乎是允许点击完成后再查看值.据我所知,没有理由这样做,我不知道为什么我这样做.该值在调用点击处理程序之前更改.事实上,规范是很清楚.没有 setTimeout 的版本在我尝试的每个浏览器(甚至IE6)中工作得很好.我只能假设我正在考虑一些其他平台,直到事件后才进行更改.在任何情况下,没有理由使用HTML复选框.




相关问题推荐