<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
onClickHandlerや
onChangeHandler`の中で、チェックボックスの新しい状態を判断するにはどうしたらいいですか?
短い答え:。
このイベントは、値が更新されるまでは発生せず、必要なときに発生します。
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
長い答え:
changeイベントハンドラは、
checked状態が更新されるまで呼び出されませんが([live example][3] | [source][4])、(Tim Bütheがコメントで指摘しているように)IEはチェックボックスがフォーカスを失うまで
changeイベントを発生させないので、先回りして通知を受け取ることができません。さらに悪いことに、IEでは、チェックボックスを更新するために、チェックボックス自体ではなく、チェックボックスの*ラベル*をクリックすると、あたかも古い値を取得しているかのような印象を受けることがあります(IEでラベルをクリックして試してみてください: [live example][5] | [source][6] )。これは、チェックボックスにフォーカスがある場合、ラベルをクリックするとフォーカスが外れ、古い値で
changeイベントが発生し、その後、
click`で新しい値が設定され、チェックボックスにフォーカスが戻るためです。非常に紛らわしいですね。
しかし、代わりに click
を使用すれば、このような不愉快なことはすべて回避できます。
私はDOM0のハンドラー(onxyz
属性)を使っていますが、念のため、onxyz
属性を使うよりも、コードでハンドラーを接続することをお勧めします(DOM2のaddEventListener
、またはIEの古いバージョンではattachEvent
)。これにより、同じ要素に複数のハンドラーをアタッチすることができ、すべてのハンドラーをグローバル関数にすることを避けることができます。
この回答の以前のバージョンでは、handleClick
にこのコードを使用していました。
function handleClick(cb) {
setTimeout(function() {
display("Clicked, new value = " + cb.checked);
}, 0);
}
目的は、クリックが完了してから値を見ることのようでした。私の知る限り、そのようにする理由はありませんし、なぜそのようにしたのかもわかりません。値はclick
ハンドラが呼ばれる前に変更されます。実際、仕様では(http://www.w3.org/TR/html5/forms.html#checkbox-state-(type=checkbox))と明確になっています。setTimeout`のないバージョンは、私が試したすべてのブラウザ(IE6でも)で完璧に動作します。私が考えていたのは、イベントの後でないと変更が行われないような 別の プラットフォームのことだったとしか思えません。いずれにしても、HTMLのチェックボックスでそんなことをする理由はありません。