Thymeleafでラジオボタンとチェックボックスを実装する方法

Javaを学習したいけれどどの学習サービスを選べば良いか分からないという悩みを抱えていませんか?
Javaは市場価値が高い為、学習サービスを提供しているものも多く、条件に合うものを見つけるのに苦労しますよね。
以下の記事ではJavaを入門レベルから勉強できるおすすめ学習サービスをご紹介しています。
Spring FrameworkやThymeleafがカリキュラムに含まれているものがあるので、ぜひ参考にしてください!
OS | macOS Catalina 10.15.1 |
Eclipse | Photon 2018-09 |
Java | 8 |
Spring Tool Suit | 3.9.6 |
Spring Boot | 2.1.13 |
Thymeleaf | 2.1.2 |
開発および実行環境がない人は、以下の記事を参考に構築してください。
今回は、Thymeleafでラジオボタンとチェックボックスを実装する方法をご紹介します。
また、ラジオボタンとチェックボックスの初期値の設定方法も掲載しています。ぜひ参考にしてください。
サンプルとして以下のようなラジオボタンとチェックボックスを作成します。
Thymeleafでラジオボタンとチェックボックスを実装する手順は以下のとおりです。
また、フォルダ構成は以下のとおりです。
src/main/java/com.example.controller
├─ RadioController.java
src/main/resources/templates
└─ radio.html
はじめに、Controllerクラスを作成します。
今回は「RadioController」という名前で作成します。
要素は4つ作成し、URLは「/radio」、テンプレートファイル名は「radio」を指定します。今回はラジオボタンとチェックボックスの初期値を「オレンジ」に設定する為、model.addAttribute("colorCd", "004")
で colorCd
に 004
を指定しています。
package com.example.controller;
import java.util.LinkedHashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class RadioController {
@RequestMapping("/radio")
public String sample(Model model) {
Map<String, String> colors = new LinkedHashMap<String, String>();
colors.put("001", "あか");
colors.put("002", "きいろ");
colors.put("003", "みどり");
colors.put("004", "オレンジ");
model.addAttribute("colors", colors);
model.addAttribute("colorCd", "004");
return "radio";
}
}
Controllerクラスの作成が完了したら、テンプレートファイルを作成します。
今回は「radio」という名前で作成します。
th:each="color : ${colors}"
でリストの要素を color
という変数に格納しています。格納後 th:text="${color.value}"
で値を表示しています。
ラジオボタンとチェックボックスの初期値は th:checked="${color.key == colorCd}"
で指定しており、color.key
がControllerクラスで指定した colorCd
と一致するもの(=オレンジ)を設定しています。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleafでラジオボタンとチェックボックスを実装する方法</title>
<style>
body {
background-color: whitesmoke;
color: #333;
}
div {
margin: 45px 0 0 45px;
}
ul {
list-style: none;
padding: 0;
}
</style>
</head>
<body>
<div>
<!-- th:eachでcolorsの要素分ループをまわす -->
<ul>
<li th:each="color : ${colors}"><input
type="radio"
name="color-radio"
th:value="${color.key}"
th:text="${color.value}"
th:checked="${color.key == colorCd}" /></li>
</ul>
<!-- th:eachでcolorsの要素分ループをまわす -->
<ul>
<li th:each="color : ${colors}"><input
type="checkbox"
name="color-checkbox"
th:value="${color.key}"
th:text="${color.value}"
th:checked="${color.key == colorCd}" /></li>
</ul>
</div>
</body>
</html>
th:eachについては、以下の記事を参考にしてください。
最後に、ブラウザで「http://localhost:8080/radio」にアクセスして動作を確認します。
以下のように表示されていたら、動作の確認は完了です。
今回は、Thymeleafでラジオボタンとチェックボックスを実装する方法をご紹介しました。
少しでも参考になれば幸いです。
以下の書籍は、Thymeleafを書籍で学びたい人やThymeleafと併せてSpring Frameworkを学習したい人におすすめしている書籍です。
Springについての書籍ですが、Thymeleafの基礎や基本構文から他システムとの連携等30ページほど取り上げられており、ThymeleafとSpringを一度に学べる書籍になっています。
ぜひ一度手に取ってみてください。
現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください!