チェックボックスで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.

チェックボックスで1つしかチェックさせなくする

先日、

• 回答任意項目で、選択解除できるようにしたいのでラジオボタンは使えない
• 選択肢が2つしかないので、セレクトボックスで隠すのではなく全て見せたい
• チェックボックスだと複数選択できてしまうけれども1つだけ選択できるようにしたい

ということがありました。

そのため、チェックボックスだけれど1つしかチェックできないようにカスタマイズしました。

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

JSのコードを見ていただけるとわかりますが、何かがチェックされたら一旦すべてのチェックを解除して、チェックされたものだけをチェック状態に戻すという処理を行なっています。

これで、1つしかチェックさせない、けれども全ての項目選択解除もできるようになりました。

まとめ

選択肢の性質に応じて使い分けて、ユーザーがわかりやすいフォームを作るようにしたいですね。

セレクトボックスの矢印を好きなものにする方法は、こちらの記事で解説

[card url=”https://note.spiqa.design/wp/select-angle/”]

セレクトボックスの初期値だけ色を変える方法は、こちらの記事で解説

[card url=”https://note.spiqa.design/wp/select-color/”]