コーディング

2022.07.20

チェックボックスで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つしかチェックさせない、けれども全ての項目選択解除もできるようになりました。

まとめ

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

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

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

この記事をシェアする

関連記事

  • 2022.09.08

    この世界はコードでできている#2

    コーディング

    その他

    制作

  • 2022.07.29

    Simple Calenderで日付/曜日がズレてしまう時の解決法

    コーディング

    制作

  • 2022.07.12

    【Web担当者必見!】Web制作でよく使う便利なサイト5選

    コーディング

    ディレクション

    制作

おすすめ記事

  • 2022.06.30

    【作業のお供に!】おすすめ深夜ラジオ3選

    社員ブログ

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

×