简单的回答：

使用click事件，该事件只有在值更新后才会触发，并在您希望它执行以下操作时触发：

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

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

Live example|Source

更长的答案：

在checked状态更新（live example）之前，不会调用change事件处理程序|source），而是因为（正如TimBüthe在评论中指出的）IE不会触发change事件，直到复选框失去焦点，你不会主动收到通知。（而不是复选框本身）来更新它，您可能会得到一个印象，即您得到的是旧值（单击标签，在IE中尝试此操作：live example|这是因为如果复选框有焦点，单击标签会将焦点从复选框上移开，用旧值触发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复选框进行更改。

对于React.js，你可以用更多可读的代码来完成这一点。希望它能有所帮助。

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

用这个

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

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

    //use this value

}
</script>

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