<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
De dentro do onClickHandler
e/ou onChangeHandler
, como posso determinar qual é o novo estado da caixa de seleção?
A resposta curta:
Utilize o evento click
, que ganhou'só dispara após o valor ter sido atualizado, e dispara quando você quiser:
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
A resposta mais longa:
O manipulador de eventos change
é'não chamado até que o estado checked
tenha sido atualizado (exemplo ao vivo | fonte), mas porque (como Tim Büos pontos nos comentários) o IE não'não dispara o evento changed
até que a caixa de seleção perca o foco, você não'não recebe a notificação proativamente. Pior, com o IE se você clicar em um label para a checkbox (ao invés da própria checkbox) para atualizá-la, você pode ter a impressão de que você'está recebendo o valor antigo (tente com o IE aqui clicando no label: exemplo ao vivo | fonte). Isto porque se a caixa de seleção tem foco, clicando na etiqueta tira o foco dela, disparando o evento "change" com o valor antigo, e então o `click' acontece definindo o novo valor e definindo o foco de volta na caixa de seleção. Muito confuso.
Mas você pode evitar todo esse aborrecimento se, em vez disso, utilizar o clique
.
I'utilizei manipuladores DOM0 (atributos onxyz
) porque isso'é o que você perguntou, mas para constar, eu geralmente recomendaria manipuladores em código (DOM2's addEventListener
, ou attachEvent
em versões antigas do IE) ao invés de utilizar atributos onxyz
. Isso permite que você anexe vários manipuladores ao mesmo elemento e evita que você torne todas as suas funções globais de manipuladores.
Uma versão anterior desta resposta utilizava este código para handleClick
:
function handleClick(cb) {
setTimeout(function() {
display("Clicked, new value = " + cb.checked);
}, 0);
}
O objetivo parecia ser o de permitir que o clique fosse concluído antes de olhar para o valor. Tanto quanto sei, não há'm razão para fazer isso, e não faço ideia porque o fiz. O valor é alterado antes de chamar o manipulador do clique
. Na verdade, a especificação é bastante clara sobre isso. A versão sem o setTimeout
funciona perfeitamente bem em todos os navegadores I'já tentei (até o IE6). Só posso assumir que estava pensando em alguma outra plataforma onde a mudança é'só depois do evento. Em qualquer caso, não há razão para fazer isso com 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)} />
}