web-dev-qa-db-ja.com

onclick / onchangeイベントからHTML Checkboxの価値を引き出す

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

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

javascripthtmleventsdomcheckbox
176
Maxim Gershkovich

短い答え：

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

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

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

実例 | 出典

長い答え：

changeイベントハンドラは、checked状態が更新されるまで呼び出されません（ ライブ例 | source ）しかし、（TimBütheがコメントで指摘しているように）IEはチェックボックスがフォーカスを失うまでchangeイベントを発生させないので、あなたは積極的に通知を受け取りません。さらに悪いことに、チェックボックスを更新するために（チェックボックス自体ではなく）ラベルのラベルをクリックすると、IEと表示されます。古い値（ここでラベルをクリックしてIEで試してください： ライブの例 | source ）これは、チェックボックスにフォーカスがある場合、ラベルをクリックするとフォーカスが外れ、古い値でchangeイベントが発生し、clickが新しい値を設定してチェックボックスにフォーカスを戻すことが発生するためです。非常に紛らわしいです。

しかし、代わりにclickを使用すれば、そのような不快感をすべて回避することができます。

DOM0ハンドラー（onxyz属性）を使用したのですが、addEventListener属性を使用するのではなく、レコード（DOM2のattachEvent、または古いバージョンのIEではonxyz）でハンドラーをフックすることをお勧めします。これにより、同じ要素に複数のハンドラをアタッチすることができ、すべてのハンドラをグローバル関数にすることを回避できます。

この回答の以前のバージョンでは、handleClickにこのコードを使用していました。

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

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

336
T.J. Crowder

これを使って

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

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

    //use this value

}
</script>
6
Farhan

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

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