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

Live example | Source

答案越长：

change事件处理程序在checked状态更新后才会被调用（live example | source），但是因为（正如TimBüthe指出的那样）评论）在复选框失去焦点之前，IE不会触发change事件，您不会主动收到通知。更糟糕的是，如果你点击一个标签的复选框（而不是复选框本身）来更新它，你可以得到你得到旧值的印象（在这里尝试使用IE）点击标签：live example | source）。这是因为如果复选框具有焦点，则单击标签将焦点从焦点移开，使用旧值触发change事件，然后click设置新值并将焦点重新设置为复选框。非常混乱。

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

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

此答案的早期版本使用此代码onxyz：

handleClick

目标似乎是在查看值之前完成点击。据我所知，没有理由这样做，我也不知道为什么这样做。在调用function handleClick(cb) { setTimeout(function() { display("Clicked, new value = " + cb.checked); }, 0); }处理程序之前更改该值。事实上，规范是quite clear about that。没有click的版本在我尝试的每个浏览器中都能很好地工作（甚至是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，您可以使用更具可读性的代码来实现。希望对您有所帮助。

wtrealm=https:\\sso.foo.bar

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

3 个答案: