从 onclick/onchange 事件中获取 HTML Checkbox 的值答案

【问题标题】：Getting value of HTML Checkbox from onclick/onchange events从 onclick/onchange 事件中获取 HTML Checkbox 的值
【发布时间】：2011-05-27 03:55:53
【问题描述】：

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

从onClickHandler 和/或onChangeHandler 中，我如何确定复选框的新状态是什么？

【问题讨论】：

标签： javascript html events dom checkbox

【解决方案1】：

简短回答：

使用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) 之前不会被调用，但是因为（正如 Tim Büthe 在 cmets 中指出的那样）IE 不会触发change 事件直到复选框失去焦点，您不会主动收到通知。更糟糕的是，使用 IE 如果您单击复选框的标签（而不是复选框本身）来更新它，您可能会觉得您正在获取旧值（在此处使用 IE 尝试单击标签：live example | source)。这是因为如果复选框有焦点，单击标签会将焦点从它身上移开，使用旧值触发 change 事件，然后 click 发生设置新值并将焦点重新设置在复选框上。非常混乱。

但如果您改用click，则可以避免所有这些不愉快。

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

此答案的早期版本将此代码用于handleClick：

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

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

【讨论】：

幸运的是 onchange 在 +IE9 中正常工作。 Source
在这里添加我的 2 美分：似乎 IE8（及以下，我假设）区分了单击向下和单击释放......我们在此页面上的原因是因为它在单击而不是单击释放时触发。似乎复选框仅在单击释放时激活 - 单击向下然后移动鼠标会注册一次单击，但不会修改复选框。
看起来通过键盘导航切换复选框 (tab+space) 也会触发 onclick 处理程序（至少在 Chrome 51 中已验证）。
点击后如何获取该复选框的值？？

【解决方案2】：

对于 React.js，您可以使用更具可读性的代码来做到这一点。希望对您有所帮助。

handleCheckboxChange(e) {
  console.log('value of checkbox : ', e.target.checked);
}
render() {
  return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}

【讨论】：

你能帮我解决这个问题吗：stackoverflow.com/questions/68386737/…我想这是我需要的，但不知道如何正确地做到这一点。
@MarkWillowAldave 对不起，我不使用 Next.js

【解决方案3】：

使用这个

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

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

    //use this value

}
</script>

【讨论】：

【解决方案4】：

use onclick event on all checkboxes that you want to get their values whether they are checked or not.

<input type="checkbox" value="rightSideCheckbox" onclick='handleClick(this);'>

function handleClick(checkbox) {
    if(checkbox.checked){
        console.log(checkbox.value+"True")
    }
    else{
        console.log(checkbox.value+"False")
    }
}

【讨论】：