JavaScript | HTML / CSS 連携：フォーム応用 － checkbox

JavaScript JavaScript
スポンサーリンク

checkbox は「ON/OFF や“複数選択”を表現するためのスイッチ」

type="checkbox" は、 「その項目を選ぶか選ばないか（ON/OFF）を表現するための入力欄」 です。

「利用規約に同意する」 「メール通知を受け取る」 「興味のある分野を複数選ぶ」

みたいな場面で、 ユーザーに「チェックする／外す」という操作をしてもらいます。

ラジオボタンが「グループの中から 1 つだけ」なのに対して、 チェックボックスは「いくつでも選んでいい」スタイルです。

checkbox の基本形と「ラベルのつけ方」

いちばんシンプルな書き方

<input type="checkbox" name="agree">

これだけだと、 画面上には小さな四角いチェックボックスだけが出ます。

ユーザーにとって分かりやすくするには、 ラベルをセットで書くのが基本です。

<input type="checkbox" id="agree" name="agree">
<label for="agree">利用規約に同意します</label>

ここでのポイントは、

id="agree" を checkbox に付ける <label for="agree"> で、その checkbox に紐づくラベルを作る

ということ。

ラベルをクリックしてもチェックが付くようになるので、 ユーザーにとって操作しやすくなります。

checkbox と label はセットで考える。 「何に同意するのか」「何を選んでいるのか」を、ラベルで明確にする。

value と name：「チェックされたときに送られる中身」

チェックされたときだけ value が送られる

<input
  type="checkbox"
  id="agree"
  name="agree"
  value="yes"
>
<label for="agree">利用規約に同意します</label>

フォームで送信するとき、

チェックされている場合 agree = "yes" が送られる

チェックされていない場合 agree 自体が送られない（何も来ない）

という挙動になります。

「チェックされているかどうか」をサーバー側で判定するときは、

値が来ている → チェックされている 値が来ていない → チェックされていない

という考え方になります。

checkbox は「ON のときだけ値が送られる」。 OFF のときは“何も送られない”というのが重要なポイントです。

「同意チェック」の定番パターン

利用規約に同意してもらうフォーム

<form action="/register" method="post">
  <p>メールアドレス：</p>
  <input type="email" name="email" required>

  <p>パスワード：</p>
  <input type="password" name="password" required>

  <p>
    <input
      type="checkbox"
      id="agree"
      name="agree"
      value="yes"
      required
    >
    <label for="agree">利用規約に同意します</label>
  </p>

  <button type="submit">登録</button>
</form>

ここでのポイントは、

required を checkbox に付けている チェックされていないと送信できない

ということです。

ブラウザが「このチェックボックスをオンにしてください」と止めてくれるので、 「同意しないまま登録される」ことを防げます。

「必ずチェックしてほしい項目」は、 checkbox に required を付ける。 これがフォーム UX と安全性の両方を守る基本テクニックです。

複数選択としての checkbox：ラジオとの違いを深掘りする

興味のある分野を複数選ぶ例

<p>興味のある分野：</p>

<input
  type="checkbox"
  id="frontend"
  name="interest_frontend"
  value="frontend"
>
<label for="frontend">フロントエンド</label>

<input
  type="checkbox"
  id="backend"
  name="interest_backend"
  value="backend"
>
<label for="backend">バックエンド</label>

<input
  type="checkbox"
  id="design"
  name="interest_design"
  value="design"
>
<label for="design">デザイン</label>

ユーザーは、

フロントエンドだけ バックエンドだけ フロントエンド＋デザイン 全部

など、自由に組み合わせてチェックできます。

ラジオボタンとの決定的な違いは、

ラジオ → 同じ name の中から 1 つだけ チェックボックス → いくつでも ON にできる

という点です。

「複数選んでいいか？ 1 つだけか？」 この問いに対する答えが、checkbox と radio を選び分ける基準になります。

JavaScript と checkbox：ON/OFF を扱う

checked プロパティで「今 ON かどうか」を見る

HTML：

<input
  type="checkbox"
  id="notify"
  name="notify"
  value="email"
>
<label for="notify">メール通知を受け取る</label>

<button type="button" id="check">状態を確認</button>
<p id="result"></p>

JavaScript：

const checkbox = document.querySelector("#notify");
const button = document.querySelector("#check");
const result = document.querySelector("#result");

button.addEventListener("click", () => {
  const isChecked = checkbox.checked; // ← true / false が入る

  if (isChecked) {
    result.textContent = "メール通知は ON です。";
  } else {
    result.textContent = "メール通知は OFF です。";
  }
});
JavaScript

ここで重要なのは、

checkbox.checked が true / false を返す value ではなく「状態」を見るときは checked を使う

ということです。

JS からチェック状態を変える

checkbox.checked = true;  // 強制的に ON にする
checkbox.checked = false; // 強制的に OFF にする
JavaScript

ユーザーの操作や条件に応じて、 チェック状態をプログラムから変更することもできます。

「全部選択」ボタンを作る応用例

複数の checkbox をまとめて ON/OFF

HTML：

<p>受け取りたい通知：</p>

<input type="checkbox" id="news" name="notify_news" value="news">
<label for="news">ニュース</label>

<input type="checkbox" id="events" name="notify_events" value="events">
<label for="events">イベント</label>

<input type="checkbox" id="offers" name="notify_offers" value="offers">
<label for="offers">お得情報</label>

<p>
  <button type="button" id="selectAll">全部選択</button>
  <button type="button" id="clearAll">全部解除</button>
</p>

JavaScript：

const checkboxes = document.querySelectorAll(
  'input[type="checkbox"][name^="notify_"]'
);
const selectAll = document.querySelector("#selectAll");
const clearAll = document.querySelector("#clearAll");

selectAll.addEventListener("click", () => {
  checkboxes.forEach((cb) => {
    cb.checked = true;
  });
});

clearAll.addEventListener("click", () => {
  checkboxes.forEach((cb) => {
    cb.checked = false;
  });
});
JavaScript

ここでやっているのは、

querySelectorAll で「通知系の checkbox」を全部取る checked = true/false で一括 ON/OFF

という操作です。

checkbox は「ON/OFF の集合」を扱うのに向いている。 JavaScript と組み合わせると、「全部選択」「全部解除」などの便利な UI を簡単に作れる。

HTML側のバリデーションと checkbox

required は「少なくとも 1 つは ON にしてほしい」には向かない

単一の checkbox に required を付けると、

その checkbox が ON でないと送信できない

という挙動になります。

しかし、「複数の checkbox のうち、少なくとも 1 つは選んでほしい」という条件は、 HTML だけではうまく表現できません。

その場合は、 JavaScript やサーバー側でチェックする必要があります。

JS で「少なくとも 1 つは選んでいるか」をチェックする例

const form = document.querySelector("#notifyForm");
const message = document.querySelector("#message");

form.addEventListener("submit", (event) => {
  const checkboxes = form.querySelectorAll(
    'input[type="checkbox"][name^="notify_"]'
  );

  const hasChecked = Array.from(checkboxes).some(
    (cb) => cb.checked
  );

  if (!hasChecked) {
    event.preventDefault();
    message.textContent = "少なくとも 1 つは通知を選択してください。";
  }
});
JavaScript

ここでの流れは、

フォーム送信前に、checkbox の状態を全部見る 1 つも ON でなければ送信を止める

というものです。

checkbox の「複数選択」のバリデーションは、 HTML だけでは足りないことが多い。 JavaScript やサーバー側でロジックを書く前提で考えるといいです。

checkbox を使うか迷ったときの判断基準

「この項目は“ON/OFF”か、“複数選んでいい候補”か？」

自分にこう聞いてみてください。

この入力は、

ON/OFF のスイッチとして自然か？ 複数選んでもいい候補の 1 つか？

YES → checkbox

利用規約への同意（ON/OFF） 通知設定（複数選択） 興味のある分野（複数選択）

こういったものは、 checkbox がぴったりハマります。

逆に、

「必ず 1 つだけ選んでほしい」 （性別、プラン 1 つだけ、支払い方法 1 つだけなど）

という場面では、 ラジオボタンの方が向いています。

初心者として「checkbox」で絶対に掴んでほしいこと

type="checkbox" は、 「ON/OFF や“複数選択”を表現するための入力欄」 です。

ラベルとセットで書いて、何を選んでいるかを明確にする チェックされているときだけ value が送られ、OFF のときは何も送られない 「必ずチェックしてほしい 1 項目」には required が使える 複数選択のバリデーションは JS やサーバー側で書くことが多い JavaScript では checked プロパティで ON/OFF を扱う

あなたが checkbox を書くときに、 「これは“ON/OFF か複数選択”を表現するスイッチで、 チェックされているときだけ値が世界に飛んでいくんだよな？」 とイメージできていたら、 もう checkbox を“ただの四角いチェック欄”ではなく、 “ユーザーの選択とアプリのロジックをつなぐ、意味のあるスイッチ”として扱えている状態です。

スポンサーリンク
タイトルとURLをコピーしました