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

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

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

JavaScriptのCheckboxオブジェクトには次のプロパティがある。

Checkboxオブジェクトのプロパティ
プロパティ説明
checked チェックボックスの状態
defaultChecked チェックボックスのデフォルトの状態
form チェックボックスを含むフォーム要素の参照
type フォーム要素のタイプ(type属性の値)
value チェックボックスの値
<input type="checkbox" id="checkbox1">
if (document.getElementById("checkbox1").checked) {
    // チェックボックスがONのときの処理
} else {
    // チェックボックスがOFFのときの処理
}

Checkboxのイベント

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

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

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

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

チェックボックス

このエントリーをはてなブックマークに追加