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

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

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

753763 次浏览
小开
最佳答案

简单的回答是:

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

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


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

__abc0 | __abc1

更长的答案是:

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复选框这样做。

小开

使用这个

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

提交答案