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

简短的回答：

使用该事件，该事件在更新值之前不会触发，并在您希望它时触发：click

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

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

现场示例 |源

更长的答案：

在更新状态之前，不会调用事件处理程序（实时示例 |source），但由于（正如 Tim Büthe 在评论中指出的那样）IE 不会触发事件，直到复选框失去焦点，您就不会主动收到通知。更糟糕的是，在 IE 中，如果您单击复选框的标签（而不是复选框本身）来更新它，您可能会得到您正在获得旧值的印象（通过单击标签在此处尝试使用 IE：实时示例 |来源）。这是因为，如果复选框具有焦点，则单击标签会将焦点从它身上移开，使用旧值触发事件，然后设置新值并将焦点设置回复选框上。非常令人困惑。changecheckedchangechangeclick

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

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

---

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

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

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

使用这个

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

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

    //use this value

}
</script>

对于 React.js，您可以使用更具可读性的代码来执行此操作。希望它有所帮助。

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

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

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

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


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