获得价值/平变化事件

144

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

从onClickHandler和/或onChangeHandler内，我怎么能确定是否复选框的新状态？获得价值/平变化事件

来源

2010-12-17 Maxim Gershkovich

269

简短的回答：

当你把它想使用click事件，该事件将不会触发，直到该值已经更新后，和火灾：

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

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

Live example | Source

较长的答案：

的change事件处理函数不是调用，直到checked状态已经更新（live example | source），但因为（蒂姆·布泰在评论中指出的），即没有按不会触发change事件，直到复选框失去焦点为止，您不会主动收到通知。更糟糕的是，如果您点击标签作为复选框（而不是复选框本身）来更新它，则可以获得您获得旧值的印象（请点击标签在IE浏览器中试用：live example | source）。这是因为如果复选框具有焦点，则单击标签将使焦点远离焦点，用旧值触发change事件，然后click发生设置新值并将焦点设置回复选框。很混乱。

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

我用DOM0处理器（onxyz属性），因为这是你问什么，但为了记录在案，我一般会建议挂接在代码处理程序（DOM2的addEventListener，或attachEvent在旧版本的IE），而不是使用onxyz属性。这使您可以将多个处理程序附加到相同的元素，并可以避免使您的所有处理程序具有全局功能。

这个答案的早期版本中使用此代码为：

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

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

来源

2010-12-17 14:34:47

幸运'onchange'在'+ IE9'正常工作。 [来源]（http://www.quirksmode.org/dom/events/change.html） – Mori 2014-01-26 07:30:01

在这里添加我的2分钱：看起来，IE8（以及以下，我假设）区分点击和点击发布...而且我们在这个网页上的原因是因为点击而不是点击发布而触发。似乎复选框仅在点击发布时激活 - 单击然后移动鼠标将注册点击，但不会修改复选框。 – dah97765 2014-08-05 16:49:16

看起来像通过键盘导航（'tab' +'space'）切换复选框也会触发'onclick'处理程序（至少在Chrome 51中进行验证）。 – 2016-06-17 18:16:31

使用此

<input type="checkbox" onclick="onClickHandler()" id="box" /> 

<script> 
function onClickHandler(){ 
    var chk=document.getElementById("box").value; 

    //use this value 

} 
</script>

来源

2017-03-07 16:06:26 Farhan

获得价值/平变化事件

回答

相关问题