
ラジオボタンとチェックボックスの違いは?複数選択できるのはどっち?元ホームページ担当ライターが詳しくわかりやすく解説

ライター/れおな=007
一般企業に勤務する傍ら執筆活動を続けるwebライター。得意分野はITはもとより、言葉の意味をはじめとする雑学など多岐に及ぶ。かつて企業内でホームページを担当した経験をもとに本記事を執筆していく。
ラジオボタンとチェックボックスの違いは?
ウェブ上のコンテンツを作成する上で、ラジオボタンとチェックボックスは選択の方法が違います。そのためアンケートや問い合わせ用のフォームを作成する際に、向いている質問事項も変わってくるでしょう。
HTML上でのコンテンツ作成時はinputタグ内で「radio」と「checkbox」のどちらかを記述しますが、他のプロパティはあまり変わらないでしょう。
こちらの記事もおすすめ

5分で分かる!HTMLとCSSの違いとは?定義や役割・読み込み方も現役エンジニアがわかりやすく解説
違いその1.選択方法
ウェブを閲覧する側にとってラジオボタンとチェックボックスの最大の違いは、両者の選択方法でしょう。本項ではラジオボタンとチェックボックスの選択方法の違い、及び選択時の表示を比較していきます。
ラジオボタン:ひとつだけ選択可能

image by iStockphoto
ウェブコンテンツにおいてラジオボタンは、ひとつだけ選択可能にしたい質問事項に用いられるでしょう。そのため一度選択した後で別の選択肢をクリックした場合、その直前に選んでいたものからはチェックが外れます。
ボタンは丸い形状になっており、選択すると選択肢の左端にあるボタンの中に一回り小さい丸が表示されるという仕様です。また選択を終えてデータを送信する際、漏れがあるとエラーが出るというケースもよく見られます。
チェックボックス:複数選択可能

image by iStockphoto
チェックボックスは一般的に、複数選択可能な質問事項に用いられます。そのため一度した選択を解除するには、もう一度同じチェックボックスをクリックする必要があるでしょう。
その名の通り画面上の選択項目の左端に四角が表示され、選択すると中に白抜きのチェックマークが表示されるのが標準的な体裁とされています。チェックボックス付きのwebアンケートの場合、選択肢にひとつ以上のチェックがあれば内容を確定できるのが一般的です。
そのため当てはまるものがない場合は、それを示す選択肢があるケースも多く見られます。また質問内容によっては、全ての項目にチェックを入れるのが可能なこともあるでしょう。
違いその2.向いている項目
ラジオボタンとチェックボックスの機能が違うため、向いている質問事項も違います。本項ではラジオボタンとチェックボックスそれぞれで向いている質問項目を、具体例を示した上で比較していきましょう。
\次のページで「ラジオボタン:年齢・性別などの重複しない項目」を解説!/