从onclick / onchange事件获取HTML Checkbox的价值

Question

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />从内部onClickHandler和/或onChangeHandler，我如何确定复选框的新状态？

Answer 1

简短的答案：

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

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

function handleClick(cb) {

  display("Clicked, new value = " + cb.checked);

}

更长的答案：

该change事件处理函数不是调用，直到checked状态已经更新（活生生的例子 | 源），但因为（蒂姆·布泰在评论中指出）IE不火change，直到选框失去焦点的事件，你没有得到主动通知。更糟的是，与IE浏览器，如果你点击一个标签的复选框（而不是复选框本身）进行更新，你可以得到的印象是，你得到的旧值（用IE试试在这里通过点击标签：活生生的例子 | 来源）。这是因为如果复选框具有焦点，则单击标签会将焦点移离它，change并使用旧值触发事件，然后单击click设置新值并将焦点重新设置在复选框上。很混乱。

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

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

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

function handleClick(cb) {

  setTimeout(function() {

    display("Clicked, new value = " + cb.checked);

  }, 0);

}

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

Answer 2

用这个

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

<script>

function onClickHandler(){

    var chk=document.getElementById("box").value;

    //use this value

}

</script>

Answer 3

对于React.js，您可以使用更具可读性的代码来实现。希望能帮助到你。

handleCheckboxChange(e) {

  console.log('value of checkbox : ', e.target.checked);

}

render() {

  return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />

}