html复选框值改变后事件,获得价值从HTML复选框/ onchange事件onclick

Mark AmeryMaxim Gershkovich提出了一个问题：Getting value of HTML Checkbox from onclick/onchange events，或许与您遇到的问题类似。

回答者T.J. Crowder给出了该问题的处理方式：

The short answer:

Use the click event, which won't fire until after the value has been updated, and fires when you want it to:

Checkbox

function handleClick(cb) {

display("Clicked, new value = " + cb.checked);

}

The longer answer:

The change event handler isn't called until the checked state has been updated (live example | source), but because (as Tim Büthe points out in the comments) IE doesn't fire the change event until the checkbox loses focus, you don't get the notification proactively. Worse, with IE if you click a label for the checkbox (rather than the checkbox itself) to update it, you can get the impression that you're getting the old value (try it with IE here by clicking the label: live example | source). This is because if the checkbox has focus, clicking the label takes the focus away from it, firing the change event with the old value, and then the click happens setting the new value and setting focus back on the checkbox. Very confusing.

But you can avoid all of that unpleasantness if you use click instead.

I've used DOM0 handlers (onxyz attributes) because that's what you asked about, but for the record, I would generally recommend hooking up handlers in code (DOM2's addEventListener, or attachEvent in older versions of IE) rather than using onxyz attributes. That lets you attach multiple handlers to the same element and lets you avoid making all of your handlers global functions.

An earlier version of this answer used this code for handleClick:

function handleClick(cb) {

setTimeout(function() {

display("Clicked, new value = " + cb.checked);

}, 0);

}

The goal seemed to be to allow the click to complete before looking at the value. As far as I'm aware, there's no reason to do that, and I have no idea why I did. The value is changed before the click handler is called. In fact, the spec is quite clear about that. The version without setTimeout works perfectly well in every browser I've tried (even IE6). I can only assume I was thinking about some other platform where the change isn't done until after the event. In any case, no reason to do that with HTML checkboxes.

希望本文对你有帮助，欢迎支持JavaScript中文网