アンケートや設定画面でよく使う「チェックボックス」と「ラジオボタン」は、どちらも input 要素の type 属性で作ります。複数選べるのがチェックボックス（checkbox）、1つだけ選べるのがラジオボタン（radio）です。この記事では、両者の作り方と違い、ラジオボタンをグループにまとめる name 属性、初期状態を選択済みにする checked、送信される value、そしてクリック範囲を広げる label との組み合わせまで、初心者の方にも分かるように解説します。
目次
checkbox と radio の違い
まず両者の役割の違いを押さえましょう。選択肢の中から「いくつでも選べる」のか「1つだけ選ぶ」のかで使い分けます。
| 種類 | type の値 | 選択数 | 向いている用途 |
|---|---|---|---|
| チェックボックス | checkbox | 0個〜複数 | 興味のある分野、同意のオン・オフ |
| ラジオボタン | radio | 1つだけ | 性別、プラン選択、はい／いいえ |
下の例で、上のグループ（チェックボックス）は複数チェックでき、下のグループ（ラジオボタン）は1つを選ぶと他が外れることを確かめてみてください。
<form>
<fieldset>
<legend>好きな言語（複数選択可）</legend>
<label><input type="checkbox" name="lang" value="html" checked> HTML</label>
<label><input type="checkbox" name="lang" value="css"> CSS</label>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
</fieldset>
<fieldset>
<legend>経験年数（1つ選択）</legend>
<label><input type="radio" name="exp" value="beginner" checked> 1年未満</label>
<label><input type="radio" name="exp" value="middle"> 1〜3年</label>
<label><input type="radio" name="exp" value="senior"> 3年以上</label>
</fieldset>
</form>
form {
font-family: sans-serif;
font-size: 15px;
}
fieldset {
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: 12px;
padding: 12px 16px;
}
legend {
font-weight: bold;
color: #555;
}
label {
display: block;
margin: 6px 0;
cursor: pointer;
}
チェックボックスの基本
チェックボックスは <input type="checkbox"> で作ります。1つずつ独立してオン・オフでき、利用規約への同意のように単独で使うこともできます。送信時にサーバーへ送られる値は value 属性で決めます。
<label>
<input type="checkbox" name="agree" value="yes">
利用規約に同意する
</label>複数の選択肢を用意するときは、同じ name を付けて並べます。チェックボックスの場合、チェックされた項目すべての value が送信されます。チェックが付いていない項目は送信されない点に注意してください。
ラジオボタンは name でグループにする
ラジオボタンで「1つだけ選べる」ようにするには、選択肢に同じ name を付けて1つのグループにまとめるのが必須です。同じ name のラジオボタンは連動し、1つを選ぶと他が自動的に外れます。
<!-- name が同じなので、どれか1つしか選べない -->
<label><input type="radio" name="plan" value="free"> 無料プラン</label>
<label><input type="radio" name="plan" value="pro"> 有料プラン</label>逆に name を別々にしてしまうと、それぞれが独立したグループ扱いになり、すべて同時に選べてしまいます。ラジオボタンが「1つだけ」にならないときは、まず name がそろっているかを確認してください。value は選択肢ごとに違う値を付け、どれが選ばれたかを区別できるようにします。
checked で初期状態を選択済みにする
ページを開いた時点で特定の選択肢を選んでおきたいときは、その input に checked 属性を付けます。checked は値を持たない属性で、書くだけで「チェック済み」になります。
<!-- 最初から「無料プラン」が選ばれた状態になる -->
<label><input type="radio" name="plan" value="free" checked> 無料プラン</label>
<label><input type="radio" name="plan" value="pro"> 有料プラン</label>ラジオボタンのグループでは、初期選択は1つだけにします。checked を複数のラジオに付けると、最後に書いたものだけが有効になります。とくに選択肢を選ばせたいフォームでは、どれか1つに checked を付けておくと、未選択のまま送信される事態を防げます。
label と結び付けてクリックしやすくする
チェックボックスやラジオボタンは小さく、四角や丸の部分だけをクリックするのは大変です。label で項目名と結び付けると、文字をクリックしても選択できるようになり、ずっと使いやすくなります。結び付け方は2通りあります。
<!-- 方法1: input を label で囲む（for/id は不要） -->
<label><input type="checkbox" name="news"> お知らせを受け取る</label>
<!-- 方法2: for と id を一致させて結び付ける -->
<input type="checkbox" id="news2" name="news2">
<label for="news2">お知らせを受け取る</label>方法1のように input を label で囲む書き方なら、id を付けずに済むので手軽です。離れた場所に配置したいときは、方法2の for 属性と id を一致させる書き方を使います。どちらの方法でも、ラベル部分のクリックで選択でき、スクリーンリーダーにも項目名が正しく伝わります。
うまく動かないときの確認ポイント
ラジオが複数選べてしまうとき
ラジオボタンが排他的に切り替わらず複数選べてしまう場合、ほぼ name の付け忘れか、グループごとに name がばらばらになっているのが原因です。同じ選択肢グループには必ず同一の name を付けてください。
値が送信されないとき
チェックボックスやラジオは、選択されていないと value が送信されません。また value を書き忘れると、ブラウザは既定値の on を送ってしまい、どれが選ばれたか区別できなくなります。選択肢ごとに意味のある value を必ず指定しましょう。
クリックできる範囲が狭いとき
四角や丸の部分しか反応しないときは、label と結び付いていない可能性があります。for と id が一致しているか、あるいは input が label の中に入っているかを確認してください。結び付けはスマートフォンでの操作性にも大きく影響します。
まとめ
チェックボックスとラジオボタンは、フォーム作りの基本となる入力部品です。要点を整理します。
- 複数選択は
type="checkbox"、1つだけ選ぶのはtype="radio"。 - ラジオボタンは同じ
nameでグループ化して初めて排他選択になる。 - 送信される値は
valueで指定する。書き忘れるとonになる。 - 初期選択は
checked属性。ラジオでは1つだけに付ける。 labelと結び付けると、文字のクリックでも選択でき使いやすい。
まずは label で囲む書き方でチェックボックスを作り、次に name でまとめたラジオボタンを試すと、両者の違いが体感できます。