[Javascript]inputのチェックボックスで1つしかチェックさせない方法

フォームのコーディングの際にチェックボックスやラジオボタン、セレクトボックスを使用する機会も多いかと思います。基本的な使い分けのご紹介です。

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

チェックボックス

複数の選択肢の中から、いくつでも自由に選択できる形式です。選んだ選択肢をもう一度クリックすることで、選択を解除することも可能です。複数選択が必要な場面や、ユーザーに自由に選んでほしい場合によく使用されます。

ラジオボタン

チェックボックスに似ていますが、ラジオボタンは1つしか選べない形式です。仕様上、必ず1つ選択してもらいたい場合によく使用されます。

セレクトボックス

セレクトボックスは、プルダウンメニュー形式で選択肢が表示されるタイプです。初期状態として「選択なし」の項目を用意することで、選択していない状態を表現することも可能です。

ここからが本題です。

先日、

・3つの選択肢のうち、1つは必ず選んでほしい

・ラジオボタンの見た目は使いたくない

・すべての選択肢を常に表示しておきたい

などの事例がございました。

その際にチェックボックスで実装をしたので、備忘録として記録しておきます。

ラジオボタンで作成したかったな…

required 属性では制御できなかったため、JavaScriptで制御を行いました。

以下code penにでご覧ください。

See the Pen Untitled by 山崎哲也 (@nzhpciri-the-builder) on CodePen.

チェックボタンがクリックされたタイミングで処理を実行し、「もしクリックされたチェックボックスがチェック状態（on）」であれば、まず同じグループ内のすべてのチェックボックスのチェックを解除（checkedをfalse）にします。

次にクリックされた要素だけをチェック状態（true）に戻す仕様にしております。

こちらであれば設問が1つの場合には、対応可能です。

次に設問が複数ある場合のパターンです。

See the Pen Untitled by 山崎哲也 (@nzhpciri-the-builder) on CodePen.

inputには属性をつける機会が多いと思いますので、今回は同じname属性を持つチェックボックスの中で、常に1つだけ選択可能にしました。

チェックをされたタイミングで、対象のname属性をattrメソッドで取得し、グルーピングしました。

ポイント：

・const groupName = $(this).attr(‘name’);→クリックされたチェックボックスのnameを取得します。

・$(input[name="{groupName}"]→同じnameを持つすべてのチェックボックス（グループ）を対象にします。

・.prop(‘checked’,false)で一度すべてのチェックを外し、$(this).prop(‘checked’,true)で再チェックするようにしております。