1 概要
2 値 : checkプロパティの値とチェック状態
3 フォーム内のチェックボックスをname、idで指定して設定する場合
- 3.1 コード
- 3.2 解説
- 3.3 実行結果
4 GetElementByIdでチェックボックスオブジェクトに設定する場合
- 4.1 コード
- 4.2 解説
- 4.3 実行結果

HTMLページのチェックボックスのチェックを設定する - JavaScript

JavaScriptでチェックボックスのチェック状態を設定するコードを紹介します。

概要

JavaScriptでチェックボックスのチェック状態を変更したい場合があります。
チェックボックスのチェック状態を設定するには、チェックボックスオブジェクトのcheckedプロパティの値に代入します。

値 : checkプロパティの値とチェック状態

checkプロパティの値に対するチェックボックスのチェック状態は以下の通りです。

checkプロパティの値と意味
値	意味
true	チェックボックスはチェックされている
false	チェックボックスはチェックされていない

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

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript" language="javascript">
    function onButtonClick() {
      document.form1.Checkbox1.checked = true;
      document.form1.Checkbox2.checked = false;
    }
  </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>
</body>
</html>

解説

下記コードがフォーム部分でチェックボックスを表示するコードです。
チェックボックス下のボタンをクリックすると onButtonClick() 関数を呼び出します。

  <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>

ボタンクリックにより呼び出される関数です。
document.forms.(参照するフォームのid).(参照するチェックボックスのid).checked に true または false を代入してチェックボックスのチェック状態を設定します。

  function onButtonClick() {
    document.form1.Checkbox1.checked = true;
    document.form1.Checkbox2.checked = false;
  }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

[Exec]ボタンをクリックします。上部のチェックボックスにチェックが入ります。

両方のチェックボックスをチェックした状態で、[Exec]ボタンをクリックします。

下のチェックボックスのチェックが解除されます。

ボタンをクリックすると、上部のチェックボックスにチェックが付き、下部のチェックボックスのチェックが外れる動作が確認できました。

GetElementByIdでチェックボックスオブジェクトに設定する場合

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript" language="javascript">
    function onButtonClick() {
      var cbox1 = document.getElementById("Checkbox1");
      var cbox2 = document.getElementById("Checkbox2");
      cbox1.checked = false;
      cbox2.checked = true;
    }
  </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();" />
</body>
</html>

解説

チェックボックスとボタンのコードです。
チェックボックス下のボタンをクリックすると onButtonClick() 関数を呼び出します。

  <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();" />

ボタンクリック時に実行されるJavaScriptのコードです。document.getElementById() メソッドを呼び出しチェックボックスのオブジェクトを取得し、チェックボックスオブジェクトの checked プロパティに true または false を代入してチェックボックスの状態を変更します。

    function onButtonClick() {
      var cbox1 = document.getElementById("Checkbox1");
      var cbox2 = document.getElementById("Checkbox2");
      cbox1.checked = false;
      cbox2.checked = true;
    }