Javascript 从 onclick/onchange 事件中获取 HTML 复选框的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4471401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting value of HTML Checkbox from onclick/onchange events
提问by Maxim Gershkovich
<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
From within onClickHandlerand/or onChangeHandler, how can I determine what is the new state of the checkbox?
从内部onClickHandler和/或onChangeHandler，我如何确定复选框的新状态是什么？
回答by T.J. Crowder
The short answer:
简短的回答：
Use the clickevent, which won't fire until after the value has been updated, and fires when you want it to:
使用该click事件，该事件在值更新后才会触发，并在您需要时触发：
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
The longer answer:
更长的答案：
The changeevent handler isn't called until the checkedstate has been updated (live example| source), but because (as Tim Büthe points out in the comments) IE doesn't fire the changeevent until the checkbox loses focus, you don't get the notification proactively. Worse, with IE if you click a labelfor 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 changeevent with the old value, and then the clickhappens setting the new value and setting focus back on the checkbox. Very confusing.
该change事件处理函数不是调用，直到checked状态已经更新（活生生的例子|源），但因为（蒂姆·布泰在评论中指出）IE不火change，直到选框失去焦点的事件，你没有得到主动通知。更糟糕的是，对于 IE，如果您单击复选框的标签（而不是复选框本身）来更新它，您可能会得到获得旧值的印象（通过单击标签在 IE 中尝试：live example|来源）。这是因为如果复选框有焦点，单击标签会将焦点从它移开，change用旧值触发事件，然后click发生设置新值并将焦点设置回复选框。非常混淆。
But you can avoid all of that unpleasantness if you use clickinstead.
但是，如果您click改为使用，则可以避免所有这些不愉快。
I've used DOM0 handlers (onxyzattributes) because that's what you asked about, but for the record, I would generally recommend hooking up handlers in code (DOM2's addEventListener, or attachEventin older versions of IE) rather than using onxyzattributes. That lets you attach multiple handlers to the same element and lets you avoid making all of your handlers global functions.
我使用了 DOM0 处理程序（onxyz属性），因为这就是您所问的，但为了记录，我通常建议在代码（DOM2addEventListener或attachEvent旧版本的 IE）中连接处理程序，而不是使用onxyz属性。这使您可以将多个处理程序附加到同一个元素，并让您避免使所有处理程序成为全局函数。
An earlier version of this answer used this code for handleClick:
此答案的早期版本将此代码用于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 clickhandler is called. In fact, the spec is quite clear about that. The version without setTimeoutworks perfectly well in every browser I've tried (even IE6). I can only assume I was thinking about some otherplatform where the change isn't done until after the event. In any case, no reason to do that with HTML checkboxes.
目标似乎是在查看值之前允许点击完成。据我所知，没有理由这样做，我也不知道我为什么这样做。在click调用处理程序之前更改该值。事实上，规范对此非常清楚。没有的版本setTimeout在我尝试过的每个浏览器（甚至 IE6）中都运行良好。我只能假设我正在考虑其他一些平台，在这些平台上，直到活动结束后才进行更改。无论如何，没有理由用 HTML 复选框来做这件事。
回答by Pakpoom Tiwakornkit
For React.js, you can do this with more readable code. Hope it helps.
对于 React.js，您可以使用更具可读性的代码来做到这一点。希望能帮助到你。
handleCheckboxChange(e) {
console.log('value of checkbox : ', e.target.checked);
}
render() {
return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}
回答by Farhan
Use this
用这个
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>
