チェックボックスとラジオボタンは何が違う？複数選択と一つの選択を試そう

フォームで四角い欄をいくつもチェックできる場合と、丸い欄のどれか一つだけを選ぶ場合があるよね。見た目の違いだけでなく、選び方のルールが違うよ。

この記事の目標は、複数の独立した選択に使うチェックボックスと、同じグループで一つを選ぶラジオボタンを分けること。ブラウザだけで、架空の入力欄を試せる。実際の申込先へ送信しないよ。

チェックボックスは、それぞれのオン・オフ

<label><input type="checkbox" value="notebook"> ノート</label>
<label><input type="checkbox" value="pen"> 筆記用具</label>

type="checkbox"は、その項目を選ぶかどうかを切り替える部品。ノートと筆記用具を両方選ぶことも、両方外すこともできる。

上の例では、文字と入力欄をlabelの中へまとめている。文字を押しても選択を切り替えられるので、小さな四角だけを狙う必要がないよ。labelの関連付けは、入力欄の名前を付ける記事でも扱っている。

ラジオボタンは、同じnameの中で一つ

<label><input type="radio" name="contact" value="mail"> メール</label>
<label><input type="radio" name="contact" value="phone"> 電話</label>

type="radio"は、同じグループから一つを選ぶ部品。この例では、二つへ同じname="contact"を付けて、同じグループにしている。フォームや文書ツリーなどの条件も関係するが、まず同じフォーム内で同じnameをそろえる形から試そう。

メールを選んだあと電話を選ぶと、メールの選択は外れる。同じ選択肢をもう一度押して空に戻す部品ではないよ。「どちらも選ばない」を用意したいなら、その選択肢や初期状態を設計しよう。

作例で、選べる数を比べよう

1. 持ち物のノートと筆記用具を両方選ぶ。結果欄に二つ出ることを確認する。
2. ノートを外すと、筆記用具だけになる。
3. 連絡方法のメールを選び、次に電話を選ぶ。電話だけが選ばれる。
4. もう一度電話を押しても、選択したままであることを確認する。
5. 「入力をリセット」で、どちらのグループも未選択へ戻す。

編集部では、二つのcheckboxが同時に選べること、radioは一つになること、リセット後は両方未選択になることをChromiumで確認した。記事側の「最初から試す」でも初期状態へ戻せるよ。

丸い見た目にしただけでは、選び方は変わらない

CSSでチェックボックスを丸く見せても、HTML上の種類はcheckboxのまま。選び方を変えたいなら、見た目だけでなく適切なtypeとグループを使おう。

実際のフォームでは、必須かどうか、未選択時に何を表示するか、送る値が何かも確認する。今回は送信処理や入力必須の判定を付けず、選択の基本だけを比べている。

名前が似た別のグループを作るときは、radioのnameを分ける。同じnameのまま増やすと、別の質問の選択が外れることがあるので、項目名と結果を一緒に見直してね。