JavaScript checkbox

JavaScriptのCheckboxオブジェクトは、HTMLのチェックボックス(<input type="checkbox">)を示すオブジェクトである。

Document Object Model (DOM)とは、W3Cから勧告されているHTML文書やXML文書をアプリケーションから利用するためのAPIである。

Elementオブジェクトのプロパティ、メソッド及びイベントもサポートする。

checked

チェックボックスの状態を判定するには、checkedプロパティを参照する。

チェックボックスの状態を判定する例を以下に示す。

<input type="checkbox" id="agreement">同意する</input>
<script>
  if (document.getElementById("agreement").checked) {
    // チェックボックスがONのときの処理
  } else {
    // チェックボックスがOFFのときの処理
  }
</script>

defaultChecked

チェックボックスのデフォルトの状態

form

チェックボックスを含むフォーム要素の参照

type

フォーム要素のタイプ(type属性の値)

value

チェックボックスの値

onchange

チェックボックスのon/offを変更したときは、onchangeイベントが発生する。

input要素のonchange属性に指定した関数が、イベントが発生したときに呼び出される。

<input type="checkbox" id="cb2" onchange="foo();">
  チェックボックス
</input>
<script>
  function foo() {
    if (document.getElementById("cb2").checked) {
      alert("チェックボックスがonに変更されました。");
    } else {
      alert("チェックボックスがoffに変更されました。");
  }
}
</script>

上記のJavaScriptは次のように動作する。

チェックボックス

ウェブページを高速に表示するためには、初期レンダリング（ページに遷移したときに最初に表示される画面領域の描画）に不必要なJavaScriptの読み込みや実行は後回しにした方がよい。 チェックボックスが変更されたときの処理は初期レンダリングに関係ないため、JavaScriptの読み込みや実行のためにHTMLの読み込みを中断させる必要はない。そのため、</body> タグの直前に配置するか、script要素にdefer属性を指定する方がよい。

参考文献

Web Hypertext Application Technology Working Group (2022) "Events" HTML Living Standard