HTMLページのチェックボックスがチェックされているか取得する

1 概要
2 フォーム内のチェックボックスをname、idで指定して取得する場合
- 2.1 書式: id属性で指定する場合
- 2.2 書式: name属性で指定する場合
- 2.3 コード
- 2.4 解説
- 2.5 実行結果
3 GetElementByIdでチェックボックスオブジェクトから取得する場合
- 3.1 書式
- 3.2 コード
- 3.3 解説
- 3.4 実行結果
4 checkプロパティの値とチェック状態

JavaScriptでチェックボックスがチェックされているか取得するコードを紹介します。

概要

JavaScriptでチェックボックスがチェックされているか、チェックされていないかを確認したい場合があります。
チェックボックスのチェック状態を取得するには、チェックボックスオブジェクトのcheckedプロパティの値を参照します。

ほかの方法

チェックボックスのチェック状態を取得する別の方法として、Formでサーバーに送信してサーバープログラムで受け取る方法があります。
サーバーサイドの実装はいろいろありますが、ASP.NETでの実装はこちらの記事、 RazorPagesでの実装はこちらの記事を参照してください。

フォーム内のチェックボックスをname、idで指定して取得する場合

書式: id属性で指定する場合

チェックボックスのチェック状態をidで参照する場合は次の書式で記述します。

document.forms.(参照するフォームのid).(参照するチェックボックスのid).checked

書式: name属性で指定する場合

チェックボックスのチェック状態を参照する場合は次の書式で記述します。

document.(参照するフォームのname).(参照するチェックボックスのname).checked

コード

以下のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" language="javascript">
      function onButtonClick() {
        check1 = document.form1.Checkbox1.checked;
        check2 = document.form1.Checkbox2.checked;

        target = document.getElementById("output");
        if (check1 == true) {
          target.innerHTML = "チェック項目1がチェックされています。<br/>";
        } else {
          target.innerHTML = "チェック項目1がチェックされていません。<br/>";
        }
        if (check2 == true) {
          target.innerHTML += "チェック項目2がチェックされています。<br/>";
        } else {
          target.innerHTML += "チェック項目2がチェックされていません。<br/>";
        }
      }
    </script>
</head>
<body>
  <form name="form1" action="">
    <input id="Checkbox1" type="checkbox" /><label for="Checkbox1">チェック項目1</label><br />
    <input id="Checkbox2" type="checkbox" /><label for="Checkbox2">チェック項目2</label><br />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>

  <div id="output"></div>
</body>
</html>

解説

下記が[Exec]ボタンがクリックされた際に実行するJavaScriptのコードです。チェックボックスの状態は、checkedプロパティで取得できます。チェックボックスがチェックされていればtrueの値、チェックされていなければfalseの値となります。 checkedプロパティを判定し、メッセージを"output"IDを持つ要素のinnerHTMLプロパティに代入して表示します。

IDで指定した要素の位置へのテキスト表示はこちらの記事を参照してください。

<script type="text/javascript" language="javascript">
  function onButtonClick() {
    check1 = document.form1.Checkbox1.checked;
    check2 = document.form1.Checkbox2.checked;

    target = document.getElementById("output");
    if (check1 == true) {
      target.innerHTML = "チェック項目1がチェックされています。<br/>";
    } else {
      target.innerHTML = "チェック項目1がチェックされていません。<br/>";
    }
    if (check2 == true) {
      target.innerHTML += "チェック項目2がチェックされています。<br/>";
    } else {
      target.innerHTML += "チェック項目2がチェックされていません。<br/>";
    }
  }
</script>

下記がフォーム部のHTMLです。フォームでは2つのチェックボックスと1つのボタンを配置しています。ボタンのonclickイベントでonBVuttonCLick()関数を実行します。

  <form name="form1" action="">
    <input id="Checkbox1" type="checkbox" /><label for="Checkbox1">チェック項目1</label><br />
    <input id="Checkbox2" type="checkbox" /><label for="Checkbox2">チェック項目2</label><br />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>

実行結果

上記のHTMLファイルを表示します。下図の画面が表示されます。
HTMLページのチェックボックスがチェックされているか取得する:画像1

チェックボックスをクリックしてチェックをつけます。チェック後[Exec]ボタンをクリックします。ボタンの下部にチェックボックスの状態を示すメッセージが表示されます。
HTMLページのチェックボックスがチェックされているか取得する:画像2

チェックボックスのチェックを変更してを[Exec]ボタンをクリックするとメッセージの内容も変わります。

GetElementByIdでチェックボックスオブジェクトから取得する場合

DOMを利用して取得する場合は、フォーム内にチェックボックスの要素が入っていない場合でも取得できます。

書式

以下の書式を利用します。

document.getElementById("(チェックボックスのID)").checked;

または

(チェックボックスオブジェクトを格納する変数) = document.getElementById("(チェックボックスのID)");
(チェックボックスオブジェクトを格納する変数).checked;

コード

以下のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" language="javascript">
      function onButtonClick() {
        checkbox1 = document.getElementById("Checkbox1");
        checkbox2 = document.getElementById("Checkbox2");

        target = document.getElementById("output");
        if (checkbox1.checked == true) {
          target.innerHTML = "チェック項目1がチェックされています。<br/>";
        } else {
          target.innerHTML = "チェック項目1がチェックされていません。<br/>";
        }
        if (checkbox2.checked == true) {
          target.innerHTML += "チェック項目2がチェックされています。<br/>";
        } else {
          target.innerHTML += "チェック項目2がチェックされていません。<br/>";
        }
      }
    </script>
</head>
<body>
  <input id="Checkbox1" type="checkbox" /><label for="Checkbox1">チェック項目1</label><br />
  <input id="Checkbox2" type="checkbox" /><label for="Checkbox2">チェック項目2</label><br />
  <input type="button" value="Exec" onclick="onButtonClick();" />

  <div id="output"></div>
</body>
</html>

解説

ボタンクリックにより onButtonClick()関数を実行します。document.getElementById() メソッドを呼び出し、チェックボックスオブジェクトを取得します。オブジェクトのcheckedプロパティにチェック状態が格納されているので、その値を判定し、画面にメッセージを表示します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
HTMLページのチェックボックスがチェックされているか取得する:画像5

チェックボックスをチェックし[Exec]ボタンをクリックします。画面下部にチェックボックスのチェック状態を表すメッセージが表示されます。
HTMLページのチェックボックスがチェックされているか取得する:画像6

チェックボックスのチェック状態を変更して[Exec]ボタンをクリックすると、メッセージの内容が変わります。