inputタグを用いて、作ることのできるチェックボックスとラジオボタンですが、それぞれがどのように使われるか理解していますか。
今回はチェックボックスとラジオボタンの特徴を解説しながら、それぞれどのような場面で使われるべきなのかを解説していきます。
Contents
前提：チェックボックスは<input type=”checkbox”>、ラジオボタンは<input type=”radio”>で作る
そもそも、チェックボックスとラジオボタンの作り方を知っているでしょうか。
下記のコードを見てください。
<input type="checkbox" name="sports" value="soccer">サッカーこのコードはチェックボックスのコードになります。
type属性を『checkbox』にすることで、チェックボックスを作ることが出来ます。それ以外のname属性とvalue属性は選択肢として存在するために必要なコードになります。
次の下記コードを見てください。
<input type="radio" name="sports" value="soccer">サッカーこのコードは先に紹介したチェックボックスのコードのtype属性『checkbox』の部分が『radio』に変わったものです。
type属性が『checkbox』の場合はチェックボックスを作ることが出来ますが、type属性が『radio』の場合はラジオボタンを作ることが出来ます。
name属性とvalue属性はチェックボックスと同じ意味で使われます。
今回は簡単にチェックボックスとラジオボタンの作り方について紹介しましたが、詳しい解説が欲しい方はラジオボタンの作り方 『input type=”radio”』で詳しく解説していますので、参考にしてみてください。
チェックボックスの作り方は解説していませんが、先に解説したようにチェックボックスとラジオボタンのコードの違いはtype属性が『checkbox』であるか『radio』であるかのみです。
その点を理解できていれば問題なく、チェックボックスを作ることも可能になります。
ここからはチェックボックスとラジオボタンの使い方にどんな特徴があるのか解説していきます。
1：チェックボックスの特徴
まず、チェックボックスの使い方の特徴について解説していきます。
1－1：複数選択できるリストである
チェックボックスのラジオボタンとは違う一番の特徴として、選択肢を複数選択できる点が挙げられます。
例えば、『この中で好きなスポーツはどれですか？』という質問の選択肢の中に好きなスポーツが複数あったとしましょう。
その時、チェックボックスの場合では複数の好きなスポーツを全て選択できるようになります。
複数の選択肢を選んでも良い、もしくは複数の回答を選んで欲しいような場合にはチェックボックスを使うことが適切になります。
1－2：選択肢が1つの場合も使うことが出来る
複数の選択肢を選べるチェックボックスですが、チェックボックスは選択肢が1つだけの場合でも使用することが出来ます。
その例としては利用規約などに同意する時などのチェックを付けるなどの用途が考えられます。
ラジオボタンでは他の選択肢がない場合、チェックを外すことが出来ません。そのため、選択肢が1つだけの場合でもチェックを付け外しできるチェックボックスが使われます。
2：ラジオボタンの特徴
次にラジオボタンの使い方の特徴について解説していきます。
2－1：複数の選択肢から1つを選択するリストである
ラジオボタンは多肢択一と呼ばれる、所謂、複数の選択肢から1つだけを選択するリストになります。
例えば、年代を知るためのアンケートがあったとします。その時、ラジオボタンを使えば、年代を複数選ぶという、存在しない結果が出ることがなくなります。
チェックボックスをアレンジすることで1つだけを選択することが出来ない訳ではありませんが、そんなことをせずともラジオボタンならその機能がデフォルトで付いています。
3：複数選択or選択肢が1つの場合はチェックボックス、多肢択一の場合はラジオボタンを使う
選択肢を複数選ぶか選択肢が1つの場合はチェックボックスを使い、複数の選択肢から1つだけを選択する場合はラジオボタンを使うと覚えておくといいでしょう。
ラジオボタンは選択肢を1つだけしか選択できません。そのため選択肢を複数選ぶためにはチェックボックスを使わなければいけません。
また、選択肢が1つの場合も、ラジオボタンでは選択したものを解除する手段がないため、チェックボックスを使うことになります。
しかし、複数の選択肢から1つだけを選択する場合はチェックボックスではいくつも選択出来てしまうため、1つだけしか選択できないラジオボタンを使うことが適しています。
今回はチェックボックスとラジオボタンのそれぞれの特徴、違いについて解説し、それぞれどの場面で使うべきなのかを解説していきました。
チェックボックスとラジオボタンはtype属性が『checkbox』であるか『radio』であるかのみしかコードの違いがなく、その使い方も似ている点が多くあります。
しかし、少しの違いに注目し、それぞれの特徴を捉えることで、自分が使いたいのはチェックボックスとラジオボタンのどちらなのか、その場面に適しているのどっちなのかを考えて使い分けましょう。
