JavaScriptでチェックボックスの選択状態を取得する

ここでは、JavaScript でチェックボックスがチェックされているかどうかを判定する方法について説明します。チェックボックスの状態を取得するためには、input 要素オブジェクトの checked プロパティを使います。

チェックボックスに同じ name 属性が付与されている場合

ひとまとまりのチェックボックスに対して同じ name 属性が与えられている場合、name 属性を使って各チェックボックスを特定し、それぞれのチェックボックスの checked プロパティが true か否かを順番に調べます。次のサンプルプログラムを見てみましょう。

HTML

<form name="form1">
  <input type="checkbox" name="fruits" value="りんご">りんご<br>
  <input type="checkbox" name="fruits" value="バナナ">バナナ<br>
  <input type="checkbox" name="fruits" value="オレンジ">オレンジ<br>
  <input type="button" value="選択" onclick="myCheck();">
</form>

JavaScript

function myCheck() {
  var flag = false; // 選択されているか否かを判定する変数

  for (var i = 0; i < document.form1.fruits.length; i++) {

    // i番目のチェックボックスがチェックされているかを判定
    if (document.form1.fruits[i].checked) {
      flag = true;
      alert(document.form1.fruits[i].value + "が選択されました。");
    }
  }

  // 何も選択されていない場合の処理
  if (!flag) {
    alert("項目が選択されていません。");
  }
}

任意のチェックボックスがチェックされているか否かはチェックボックスを表すinput要素オブジェクトのcheckedプロパティで判定します。checkedは、チェックボックスがチェックされていればtrueを返し、チェックされていなければfalseを返します。

任意のチェックボックスは、以下のようにして特定します。

document.フォームのname.チェックボックスのname[]

例えば、一番目の「りんご」のチェックボックスがチェックされているか否かは次のように記述します。

document.form1.fruits[0].checked

上記のサンプルでは、for文を用いて各チェックボックスがチェックされているかどうかを順番に判定しています。

name 属性が付与されていない場合

チェックボックスに name 属性が付与されていない場合は、elements[] を使ってチェックボックスを特定します。

HTML

<form name="form1">
  <input type="checkbox" name="fruits" value="りんご">りんご<br>
  <input type="checkbox" name="fruits" value="バナナ">バナナ<br>
  <input type="checkbox" name="fruits" value="オレンジ">オレンジ<br>
  <input type="button" value="選択" onclick="myCheck();">
</form>

JavaScript

function myCheck() {
  var flag = false;

  // elements にはボタンの要素も含まれてしまうため -1 しています
  for (var i = 0; i < document.form1.elements.length - 1; i++) {
    if (document.form1.elements[i].checked) {
      flag = true;
      alert(document.form1.elements[i].value + "が選択されました。");
    }
  }

  if (!flag) {
    alert("項目が選択されていません。");
  }
}

elements[]は form の要素（ここでは input タグ）を配列の形で持つため、name 属性が付与されていなくとも各チェックボックスを特定し、各チェックボックスがチェックされているかを順番に判定しています。