チェックボックスで1つしかチェックさせない方法

コーディング

フォーム

フォームのコーディングのときにチェックボックスやラジオボタン、セレクトボックスをよく使いますよね。

今回は、基本的な使い分けからカスタマイズまでご紹介します！

チェックボックスとラジオボタン、セレクトボックスの使い分け

チェックボックス

チェックボックスは、選択肢が並んでいて、いくつでも選択できるものです。選択したものをもう一度クリックすることで選択を解除することもできます。
複数選択で好きに選んで欲しい時に使うのに適しています。

See the Pen check by spiqa design (@spiqa_design) on CodePen.

ラジオボタン

ラジオボタンもチェックボックスと同じように選択肢が並んでいますが、ラジオボタンは1つしか選択できない仕組みになっています。
チェック1を選択した後にチェック2を選択すると、チェック1の選択が外れてしまいます。
また、一度何かを選択すると、「何もチェックしない状態」に戻れなくなってしまいます。
そのような仕様上、ラジオボタンは、必ず1つ何か選んで欲しい時に適しています。

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

セレクトボックス

セレクトボックスは、ボックスをクリックすると選択肢が表示される仕組みになっています。
1つ何かを選ぶことができ、また、値の無い選択肢を用意しておくことで、何も選択していない状態に戻ることもできます。
選択必須・任意どちらも対応可能で、選択させたい項目が1つの時に適しています。
また、セレクトボックスは、選択肢が隠れるという仕様上、選択肢の数が多い時によく使われます。

See the Pen select by spiqa design (@spiqa_design) on CodePen.