从onclick/onchange事件中获取HTML复选框的值

Question

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

在 onClickHandler 和/或 onChangeHandler 中，如何确定复选框的新状态？

- Maxim Gershkovich

Answer 1

简单回答：

使用click事件，它会在值被更新后才触发，并且会在您希望它触发时触发：

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

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

实时示例 | 源代码

更详细的解释:

change 事件处理程序在 checked 状态已更新后才会被调用 (实时示例 | 源代码)，但是由于（正如 Tim Büthe 在评论中指出的那样）IE 不会在复选框失去焦点之前触发 change 事件，所以您无法及时得到通知。更糟糕的是，如果您在 IE 中单击复选框的 标签（而不是复选框本身）以更新它，您可能会得到旧值的印象（请在此处使用 IE 尝试单击标签：实时示例 | 源代码）。这是因为如果复选框具有焦点，则单击标签会将焦点从复选框中移开，触发带有旧值的 change 事件，然后 click 发生并设置新值，并将焦点重新设置在复选框上。非常令人困惑。

但是，如果您使用 click，则可以避免所有这些不愉快的事情。

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

---

此答案的早期版本使用以下代码来处理 handleClick：

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

目标似乎是在点击完成之前查看值。据我所知，没有理由这样做，我也不知道为什么要这样做。值在调用click处理程序之前已更改。事实上，规范非常清楚。没有setTimeout的版本在我尝试过的每个浏览器中都可以正常工作（甚至是IE6）。我只能假设我当时在考虑一些其他平台，在该平台上更改直到事件之后才完成。无论如何，在HTML复选框中没有理由这样做。

- T.J. Crowder

---

onchange 在 IE9+ 中能够正确地工作。来源 - Mori

在这里添砖加瓦：看起来IE8（及以下版本，我猜）区分点击按下和点击释放...而我们访问此页面的原因是它在点击按下时触发，而不是在点击释放时触发。似乎复选框只有在点击释放时才会激活 - 按下后移动鼠标会注册点击，但不会修改复选框。 - dah97765

通过键盘导航（Tab+空格），似乎切换复选框也会触发 onclick 处理程序（至少在 Chrome 51 中已验证）。 - Nate Whittaker

点击复选框时如何获取其值？ - user7350714

Answer 2

对于React.js，您可以使用更易读的代码来实现这一点。希望它有所帮助。

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

- Pakpoom Tiwakornkit

---

你能帮我解决这个问题吗：https://stackoverflow.com/questions/68386737/nextjs-javascript-referenceerror-array-is-not-defined-htmlinputelement-onchan 我猜这就是我需要的，但不知道如何正确操作。 - Mark Willow Aldave

@MarkWillowAldave 抱歉，我不使用Next.js。 - Pakpoom Tiwakornkit

Answer 3

使用此功能

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

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

    //use this value

}
</script>

- Farhan

---

.value 总是返回 'on'，请使用 .checked 返回 'true' 或 'false'。 - Per Lindberg

Answer 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")
    }
}

- Sarfraz Rasheed

Answer 5

 
const [checkboxval, setCheckboxVal] = React.useState(null);

const handleChangeCheckbox = (e) => {
   setCheckboxVal(e.target.checked);
}


render() {
   return <input type="checkbox" onChange={(e) => handleChangeCheckbox(e)}
}

- Lokesh KC

---

目前你的回答不够清晰，请[编辑]以添加更多细节，帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community