radioボタンは「グループの中から“必ず1つだけ”選んでもらうための入力欄」
type="radio" は、 「いくつかの候補の中から、ユーザーに“1つだけ”選んでもらうための入力欄」 です。
チェックボックスが「いくつでも選んでいい」のに対して、 radioボタンは「このグループの中から 1 つだけ」というルールを持っています。
性別 料金プラン 支払い方法 表示モード（ライト／ダーク）
みたいな、「どれか 1 つに決めてほしい」場面で使います。
radioボタンの超重要ポイント：「同じ name のものが“1グループ”になる」
基本形とグループの考え方
いちばんシンプルな例からいきます。
<p>プランを選択：</p>
<input type="radio" id="plan-basic" name="plan" value="basic">
<label for="plan-basic">ベーシック</label>
<input type="radio" id="plan-standard" name="plan" value="standard">
<label for="plan-standard">スタンダード</label>
<input type="radio" id="plan-premium" name="plan" value="premium">
<label for="plan-premium">プレミアム</label>
ここでのポイントは、
name="plan" が 3 つとも同じ 「plan」という 1 グループの中から、1 つだけ選べる
ということです。
ユーザーが「スタンダード」を選ぶと、
画面上では「スタンダード」だけが黒丸になる 送信される値は plan = "standard"
という状態になります。
もし name をバラバラにしてしまうと、
<input type="radio" name="plan_basic" value="basic">
<input type="radio" name="plan_standard" value="standard">
<input type="radio" name="plan_premium" value="premium">
全部別グループ扱いになり、 3 つ全部にチェックが付けられてしまいます。
radioボタンは「同じ name を持つものが 1 グループ」。 “グループの中から 1 つだけ”というルールは、name で決まる。 ここを理解しているかどうかで、radio を使いこなせるかが決まります。
value とラベル：「ユーザーが見るもの」と「送るもの」を分ける
送信されるのは value、画面に見えるのはラベル
さっきのプラン例をもう一度見ます。
<input type="radio" id="plan-basic" name="plan" value="basic">
<label for="plan-basic">ベーシック</label>
ユーザーに見えているのは「ベーシック」という文字。 送信されるのは value="basic" です。
ユーザーが「プレミアム」を選んで送信すると、 サーバー側にはだいたい plan = "premium" という形で届きます。
ラベルは人間向け、value はプログラム向け。 この分け方がとても大事です。
例えば、支払い方法ならこう書けます。
<input type="radio" id="pay-card" name="payment" value="card">
<label for="pay-card">クレジットカード</label>
<input type="radio" id="pay-bank" name="payment" value="bank">
<label for="pay-bank">銀行振込</label>
<input type="radio" id="pay-cash" name="payment" value="cash">
<label for="pay-cash">代金引換</label>
画面には「クレジットカード」「銀行振込」「代金引換」と出て、 送信されるのは "card", "bank", "cash" という扱いやすい値。
radio の value は「プログラムが扱いやすい ID」、 ラベルは「ユーザーが理解しやすい日本語」。 この役割分担を意識して設計すると、後で楽になります。
初期選択と「何も選んでいない状態」をどう扱うか
checked で「最初から選ばれているもの」を決める
特定の選択肢を初期状態で ON にしたいときは、checked を使います。
<input
type="radio"
id="plan-basic"
name="plan"
value="basic"
checked
>
<label for="plan-basic">ベーシック</label>
<input type="radio" id="plan-standard" name="plan" value="standard">
<label for="plan-standard">スタンダード</label>
<input type="radio" id="plan-premium" name="plan" value="premium">
<label for="plan-premium">プレミアム</label>
この場合、 ページを開いた瞬間に「ベーシック」が選ばれています。
「おすすめプランを最初に選んでおく」 「前回の選択を初期値にする」
みたいな UX を作るときに使います。
「必ずどれか選んでほしい」ときの考え方
radio は、 「何も選ばれていない状態」もあり得ます。
フォームで送信するときに、 「必ずどれか 1 つは選んでほしい」なら、 サーバー側や JavaScript でチェックするのが基本です。
HTML の required を使うときは、 グループの中の 1 つに付けます。
<input
type="radio"
id="plan-basic"
name="plan"
value="basic"
required
>
<label for="plan-basic">ベーシック</label>
<input type="radio" id="plan-standard" name="plan" value="standard">
<label for="plan-standard">スタンダード</label>
<input type="radio" id="plan-premium" name="plan" value="premium">
<label for="plan-premium">プレミアム</label>
ブラウザは「このグループのどれかが選ばれていないと送信させない」という挙動になります。
checkbox との違いを“感覚レベル”で掴む
「複数選んでいいか？ 1つだけか？」が分かれ目
同じ「丸いボタン」でも、 checkbox と radio は性格がまったく違います。
checkbox ON/OFF のスイッチ 複数選択 OK 同じ name でもグループという概念はない（送信される値の扱いが違う）
radio 同じ name の中から 1 つだけ 「どれか 1 つに決める」ための UI
例えば「興味のある分野」は複数選んでいいので checkbox。 「料金プラン」は 1 つだけ選んでほしいので radio。
「この項目は、ユーザーに 1 つだけ選んでほしいか？ それとも複数選んでもいいか？」 この問いに対する答えが、radio と checkbox を選び分ける軸です。
JavaScript と radioボタン：選ばれた値を扱う
選択された値を読む
HTML：
<p>テーマカラー：</p>
<input type="radio" id="theme-light" name="theme" value="light" checked>
<label for="theme-light">ライト</label>
<input type="radio" id="theme-dark" name="theme" value="dark">
<label for="theme-dark">ダーク</label>
<button type="button" id="apply">適用</button>
<p id="result"></p>
JavaScript：
const applyButton = document.querySelector("#apply");
const result = document.querySelector("#result");
applyButton.addEventListener("click", () => {
const selected = document.querySelector('input[name="theme"]:checked');
if (!selected) {
result.textContent = "テーマが選択されていません。";
return;
}
const value = selected.value; // "light" または "dark"
result.textContent = `選択されたテーマ：${value}`;
});
ここでのポイントは、
input[name="theme"]:checked で「今選ばれている 1 つ」を取る その value が送信される値と同じ
ということです。
radio は「グループの中で、checked な 1 つ」を探す、 というパターンで扱うのが基本。
JS から選択状態を変える
const darkRadio = document.querySelector('#theme-dark');
darkRadio.checked = true; // 強制的に「ダーク」を選択状態にする
条件に応じて、 「この状況ならこっちを選んでおいてあげよう」といった UX を作ることもできます。
フォーム送信と radio：サーバー側でどう受け取るか
「選ばれた 1 つの value」が飛んでくる
プラン選択フォームを例にします。
<form action="/signup" method="post">
<p>プラン：</p>
<input type="radio" id="plan-basic" name="plan" value="basic" checked>
<label for="plan-basic">ベーシック</label>
<input type="radio" id="plan-standard" name="plan" value="standard">
<label for="plan-standard">スタンダード</label>
<input type="radio" id="plan-premium" name="plan" value="premium">
<label for="plan-premium">プレミアム</label>
<button type="submit">登録</button>
</form>
ユーザーが「プレミアム」を選んで送信すると、 サーバー側にはだいたい plan = "premium" という形で届きます。
「どのプランが選ばれたか？」を判定するときは、 この 1 つの値を見れば十分です。
checkbox のように「複数の値が来る」ことはありません。 radio は「必ず 1 つだけ（または何も選ばれていない）」という前提で考えます。
radioボタンを使うか迷ったときの判断基準
「この選択は“どれか1つに決めてほしい”ものか？」
自分にこう聞いてみてください。
この入力は、
どれか 1 つに決めてもらうのが自然か？ 複数選んでもいいものではないか？
YES → radio
性別 料金プラン 支払い方法 テーマカラー 表示モード
こういったものは、 radio がぴったりハマります。
逆に、 「複数選んでいいもの（興味のある分野、通知の種類など）」は checkbox の方が向いています。
初心者として「radioボタン」で絶対に掴んでほしいこと
type="radio" は、 「同じ name を持つグループの中から、ユーザーに“必ず 1 つだけ”選んでもらうための入力欄」 です。
同じ name のものが 1 グループになる グループの中では 1 つだけが checked になる value が送信される値、ラベルがユーザーに見える文字 「1 つだけ選んでほしい」場面で使う（複数選択なら checkbox） JavaScript では input[name="..."]:checked で選ばれた 1 つを取る
あなたが radioボタンを書くときに、 「このグループは“どれか 1 つに決めてもらうためのもの”で、 同じ name の中から 1 つだけが世界に飛んでいくんだよな？」 とイメージできていたら、 もう radio を“ただの丸いボタン”ではなく、 “ユーザーの選択をきれいに 1 つに絞るためのインターフェース”として扱えている状態です。