从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:live example | 来源).这是因为如果复选框具有焦点,则单击标签会使焦点远离它,change使用旧值触发事件,然后click设置新值并将焦点设置回复选框.很混乱.

但是如果你使用它,你可以避免所有这些不愉快click.

我使用过DOM0处理程序(onxyz属性),因为这就是你所要求的,但是对于记录,我通常会建议在代码(DOM2 addEventListener或attachEvent旧版本的IE)中挂钩处理程序,而不是使用onxyz属性.这允许您将多个处理程序附加到同一元素,并允许您避免使所有处理程序全局函数.

此答案的早期版本使用此代码handleClick:

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

目标似乎是在查看值之前允许点击完成.据我所知,没有理由这样做,我不知道为什么这样做.在click调用处理程序之前更改该值.事实上,规范很明确.setTimeout在我尝试过的每个浏览器中都没有完美的版本(甚至是IE6).我只能假设我正在考虑其他平台,直到事件发生之后才进行更改.无论如何,没有理由使用HTML复选框.

Answer 2

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

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

Answer 3

用这个

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

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

    //use this value

}
</script>