HTMLチェックボックス：複数の値・required・indeterminate

HTMLリファレンス

作成日 2026-10-30 最終更新日 2026-10-30

HTML <input type="checkbox"> では、各オプションを独立して選択または解除できます。選択されたチェックボックスのみがその名前と値を送信します。チェックされていないオプションは、false や空文字列として送信されるのではなく、送信データから省略されます。

同じ名前の複数の値を読み取る

ラジオボタンとは異なり、同じnameを持つチェックボックスは一緒に選択できます。それらの値は1つの名前の下で繰り返されるため、すべて読み取ってください。JavaScriptのFormDataインスタンスでgetAllを使用し、複数の値を扱う際のサーバーフレームワークのルールを確認してください。

nameはフィールドを識別します；valueは選択時に送信される値です。valueを省略するとデフォルト文字列onが使用されるため、オプションを区別するために値を指定してください。ラベルのためにすべてのチェックボックスにユニークなidを付けてください。

完全な例：複数選択、必須チェック、除外された項目

このコードを checkbox-demo.html として保存し、ブラウザで開いてください。サーバーに送信するのではなく、実際のフォーム入力を表示します。無効化されたオプションがチェックされていても除外される様子を比較してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>チェックボックスの送信値</title>
  <style>pre { white-space: pre-wrap; overflow-wrap: anywhere; }</style>
</head>
<body>
  <h1>チェックボックスの練習</h1>
  <form id="demo">
    <fieldset>
      <legend>好みの色（複数選択）</legend>
      <input type="checkbox" id="blue" name="color" value="blue" checked>
      <label for="blue">青</label>
      <input type="checkbox" id="red" name="color" value="red">
      <label for="red">赤</label>
      <input type="checkbox" id="locked" name="color" value="green" checked disabled>
      <label for="locked">緑（無効）</label>
    </fieldset>
    <p>
      <input type="checkbox" id="ready" name="ready" value="yes" required>
      <label for="ready">練習の準備完了（必須）</label>
    </p>
    <button type="submit">値を確認</button>
    <button type="reset">初期化</button>
    <button type="button" id="partial">青を部分選択の表示にする</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    const blue = document.getElementById('blue');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    document.getElementById('partial').addEventListener('click', () => {
      blue.indeterminate = true;
    });
    form.addEventListener('reset', () => {
      result.textContent = '';
      blue.indeterminate = false;
    });
  </script>
</body>
</html>

準備完了のチェックボックスを選択せずに送信してください：必須のバリデーションが送信をブロックします。
準備完了と赤を選択して送信します。出力には color=blue、color=red、ready=yes が含まれ、無効化された緑は除外されます。
青と赤のチェックを外して再度送信すると、color項目がなくなり、ready=yesだけが残ります。
リセットで青と緑がチェックされた状態に戻り、赤と準備完了はチェックが外れた状態に戻ります。

チェック済み、必須、未確定を区別してください

checked 属性は初期選択を指定します。現在の状態は JavaScript の checked プロパティで読み取ります。checked="false" にはまだ属性が存在しています。初めはチェックされていないボックスの場合は省略してください。リセットはすべてのボックスをクリアするのではなく、初期値を復元します。

required を持つチェックボックスは、それ自体がチェックされている必要があります。同じ名前を共有する任意の一つのチェックボックスで十分という意味ではありません。「これらのうち少なくとも1つ」条件は、別途検証および指示が必要です。

indeterminate は部分選択状態を表示する JavaScript のプロパティです。これは HTML 属性を通じて設定されるものではなく、送信を決定する checked とは独立しています。リセット後、部分表示ボタンを押し、必要な準備ボックスを選択し、値を確認すると、青は依然として送信されます。部分表示は checked をクリアしたり、第三の送信値を作成したりすることはありません。

サーバーで欠落値や複数の値を処理する

欠落している未チェックのオプションをすべてエラーとして扱うことや、重複した名前の最後の値だけを読むことは、意図した意味を変える可能性があります。アプリケーションのルールを使用して「何も選択されていない」の状態と無効なリクエストを区別し、サーバーで許可された値を検証してください。

PHPはname="color[]"を配列として受け取ることができますが、これはサーバーのパーサのルールに従います。ブラウザはすべてのプログラミング言語に対して普遍的な配列オブジェクトを送信するわけではありません。受信した値が配列であることを確認し、欠けている値、ネストされた配列、および許可されていない値を処理してください。パースルールについてはPHPの外部変数のドキュメントを参照し、チェックボックスの動作についてはMDNチェックボックスリファレンスを参照してください。

HTMLリファレンス