[解決済み】onclick/onchangeイベントからHTMLチェックボックスの値を取得する。

質問

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

内部から onClickHandler および/または onChangeHandler チェックボックスの新しい状態を判断するにはどうすればよいですか？

どのように解決するのですか？

簡単に言うと

を使用します。 click このイベントは、値が更新されるまで発生せず、必要なときに発生します。

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

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

ライブの例 | ソース

長い回答です。

その change イベントハンドラが呼び出されるのは checked 状態が更新されました ( 実例 | ソース を発行しないためです（コメントで Tim Büthe が指摘しています）。 change イベントが発生し、チェックボックスのフォーカスが外れるまで、通知を積極的に受け取ることはできません。さらに悪いことに、IE では ラベル を更新しようとすると、古い値を取得したかのような印象を受けることがあります（ここでIEでラベルをクリックして試してみてください。 実例 | ソース ). これは、チェックボックスにフォーカスがある場合、ラベルをクリックするとチェックボックスからフォーカスが外れてしまい change イベントに古い値で参加し、その後 click が発生すると、新しい値が設定され、チェックボックスにフォーカスが戻されます。非常に紛らわしいですね。

しかし、このような不愉快なことを避けるために click の代わりに

DOM0ハンドラ( onxyz 属性) について質問されたからですが、念のため、私は一般的に、コードでハンドラをフックすることをお勧めします (DOM2 の addEventListener または attachEvent を使用するよりも、古いバージョンの IE で onxyz 属性を使用します。これにより、同じ要素に複数のハンドラをアタッチすることができ、すべてのハンドラをグローバル関数にすることを避けることができます。

この回答の以前のバージョンでは、このコードを handleClick :

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

目的は、クリックが完了してから値を見ることだったようです。私が知る限り、そうする理由はありませんし、なぜそうしたのか見当もつきません。値が変更されるのは click ハンドラが呼び出されます。実は、この仕様は については、かなり明確です。 . がないバージョンは setTimeout は、私が試したすべてのブラウザで（IE6でも）完全にうまく動作します。私が考えていたのは、いくつかの その他 プラットフォームでは、イベントの後まで変更が行われません。いずれにせよ、HTMLのチェックボックスでそのようなことをする理由はないでしょう。