入力画面、ラジオボタンとラジオボタングループを使う STS3＋Spring Boot＋thymeleaf

ラジオボタンを配置した画面の処理をやります。

STS3(3.9.6)＋SpringBoot2.0＋Tymeleaf3.0迄動作確認しています。

f:id:arakan_no_boku:20190222012501j:plain

今回の仕様

ラジオボタンは複数の選択肢のうち、ひとつだけを選ばせます。

選択の仕方のバリエーションとして以下の2パターンがあります。

普通に一箇所に固めた選択肢で選ばせる場合
ページの中にとびとびに離れた場所に配置して、それでも「その中からひとつ」の制約をつけるラジオボタンのグループ化を使う場合

です。

今回は、この２つのケースを両方ともやってみます。

なお、今回も、前回までの画面にこの２つを追加する形でやるので、コントローラクラスとかは同じものを使い、変更点だけ書いてます。

画面で実行ボタンを押したときに呼び出されるコントローラクラスのメソッドなど、変更の必要のなかったものについては触れていません。

そちらの解説が必要な方はこちらの記事も一緒に見てください。

arakan-pgm-ai.hatenablog.com

Formクラス

ラジオボタンも選択された値を受け取るのはString型です。

ラジオボタンは複数受け取る可能性がないので、そちらの考慮はいりません。

private String selectedRadio;

public String getSelectedRadio() {
return selectedRadio;
}

public void setSelectedRadio(String selectedRadio) {
this.selectedRadio = selectedRadio;
}

Mapを返すメソッド

コントローラクラスでは、ラジオボタンの選択肢をMAPで画面に渡します。

今回は、ラジオボタングループをためすために、２種類のMAPを返すメソッドを別々に書いてます。

private Map<String,String> getRadioItems(){
Map<String, String> selectMap = new LinkedHashMap<String, String>();
selectMap.put("key_A", "ラジオボタンの選択肢Ａは、これですよ");
selectMap.put("key_B", "ラジオボタンの選択肢Ｂは、これですよ");
selectMap.put("key_C", "ラジオボタンの選択肢Ｃは、これですよ");
selectMap.put("key_D", "ラジオボタンの選択肢Ｄは、これですよ");
selectMap.put("key_E", "ラジオボタンの選択肢Ｅは、これですよ");
return selectMap;
}

private Map<String,String> getRadioOtherItems(){
Map<String, String> selectMap = new LinkedHashMap<String, String>();
selectMap.put("key_F", "ラジオボタンの選択肢Ｆは、これですよ");
selectMap.put("key_G", "ラジオボタンの選択肢Ｇは、これですよ");
selectMap.put("key_H", "ラジオボタンの選択肢Ｈは、これですよ");
selectMap.put("key_I", "ラジオボタンの選択肢Iは、これですよ");
selectMap.put("key_J", "ラジオボタンの選択肢Jは、これですよ");
return selectMap;
}

コントローラクラスです

生成したMAPを画面に渡します。

@RequestMapping(value = "/hello3", method = RequestMethod.GET)
public String index(Hello3Form form, Model model) {
model.addAttribute("radioItems",getRadioItems());
model.addAttribute("radioOtherItems",getRadioOtherItems());
return "hello3";
}

ラジオボタンを表示するHTML

最初のA～Eまでの分です。

divタグのth:eachに、コントローラクラスでMAPをセットした名前「radioItems」を渡して、ループさせてます。

選択した値を受け取る変数は、th:fieldにFormクラスに定義した名前を渡して指定します。

<div th:each="item : ${radioItems}">
     <input type="radio" name="selectedRadio" th:value="${item.key}" th:text="${item.value}" th:field="*{selectedRadio}" />
 </div>

次にF～Jまでの分です。ポイントは、nameに渡す名前と、th:fieldに渡す名前です。

これを、A～Eまでの分と同じにすれば、同じグループとみなされて、A～Jまででひとつだけ選択できるようになります。

<div th:each="item : ${radioOtherItems}">
     <input type="radio" <span style="color: #d32f2f;">name="selectedRadio"</span> th:value="${item.key}" th:text="${item.value}"<span style="color: #d32f2f;"> th:field="*{selectedRadio}"</span> />
 </div>

逆にここを違う名前にすれば、それぞれ独立したラジオボタンになるわけです。