Obtendo o valor da caixa de seleção HTML de eventos onclick / onchange

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

De dentro onClickHandlere / ou onChangeHandler, como posso determinar qual é o novo estado da caixa de seleção?

A resposta curta:

Use o clickevento, que não será acionado até após a atualização do valor e será acionado quando você desejar:

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

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

Exemplo ao vivo | Fonte

A resposta mais longa:

O changemanipulador de eventos não é chamado até que o checkedestado seja atualizado ( exemplo ao vivo | fonte ), mas porque (como Tim Büthe aponta nos comentários) o IE não aciona o changeevento até que a caixa de seleção perca o foco, você não consegue a notificação proativamente. Pior, com o IE, se você clicar em um rótulo para a caixa de seleção (em vez da própria caixa de seleção) para atualizá-lo, poderá ter a impressão de que está obtendo o valor antigo (tente com o IE aqui clicando no rótulo: exemplo vivo | fonte ). Isso ocorre porque, se a caixa de seleção tiver foco, clicar no rótulo afasta o foco, dispara o changeevento com o valor antigo e, em seguida, oclickacontece definindo o novo valor e voltando a focar na caixa de seleção. Muito confuso.

Mas você pode evitar todo esse desagrado se você o usar click.

Eu usei manipuladores DOM0 ( onxyzatributos) porque é isso que você perguntou, mas para o registro, geralmente recomendo conectar manipuladores no código (DOM2 addEventListenerou attachEventem versões mais antigas do IE) em vez de usar onxyzatributos. Isso permite anexar vários manipuladores ao mesmo elemento e evita que todos os manipuladores sejam funções globais.

Uma versão anterior desta resposta usava este código para handleClick:

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

O objetivo parecia ser permitir que o clique fosse concluído antes de analisar o valor. Tanto quanto sei, não há razão para fazer isso, e não faço ideia do porquê. O valor é alterado antes que o clickmanipulador seja chamado. De fato, a especificação é bastante clara sobre isso . A versão sem setTimeoutfunciona perfeitamente bem em todos os navegadores que experimentei (até no IE6). Só posso supor que estava pensando em outra plataforma em que a mudança não é feita até depois do evento. De qualquer forma, não há razão para fazer isso com as caixas de seleção HTML.

Para o React.js, você pode fazer isso com um código mais legível. Espero que ajude.

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

Usa isto

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

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

    //use this value

}
</script>