【Bootstamp】複数の設問にラジオボタンで回答いただく場合の注意点

はじめに

今回は下記の画像のように、
ひとつのページで複数の設問にラジオボタンで答えていただくページを作成する際に
Bootstrapのラジオボタンを使用する場合の注意点について記述させていただきます。

Bootstrapのラジオボタンは下記URLへ飛んでいだたければ使用できます！
（ https://getbootstrap.jp/docs/5.0/forms/checks-radios/ ）

また、Bootstrapの使い方についてご不明な方は、
別の記事をご覧いらだければと思います。

開発環境

Bootstamp バージョン５
Ruby on Rails バージョン2.6.5

ラジオボタンのはめ込み

Bootstrapのラジオボタンのページを飛んでいただき、下記の記述をラジオボタンもはめ込みたいところに記述します。
（ ラジオボタンのURL : https://getbootstrap.jp/docs/5.0/forms/checks-radios/ ）

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

これでこのようなラジオボタン設置が可能です。

ラジオボタンをひとつのページで複数設定する場合

先程のコードを記述することでラジオボタンの設置は可能です。
ですが、ひとつにページで複数のラジオボタンを設置する場合は、
そのまま二つ目以降をそのまま記述してしまうと問題が発生します。

その問題とは、1ページで選択できるラジオボタンがひとつだけになってしまうという状況が起こります。
例）下記画像の場合、、、
設問１で回答Dと答え、設問２で回答Bを選択したとき、
設問１の回答Dの回答は消えてしまい、設問２の回答のみが残ってしまいます。

問題を解決する方法

こちらの問題を解決する方法は、２つ目以降のラジオボタンを設置する際に、
<input>タグのname属性の名前を変更します！


設問１
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

設問２では

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault-1" ※ここを変える id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault-1" ※ここを変える　id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

こうすることで、設問の数だけラジオボタンを選択することが可能となります！