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状態が更新された（実際の例 | ソース）が、IEが起動しない（ティム・ブーテはコメントで指摘するように）ので、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チェックボックスでこれを行う理由はありません。

React.jsの場合は、より読みやすいコードでこれを行うことができます。それが役に立てば幸い。

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

これを使って

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

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

    //use this value

}
</script>