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

2022/07/18Java Thymeleaf

Javaを学習したいけれどどの学習サービスを選べば良いか分からないという悩みを抱えていませんか？
Javaは市場価値が高い為、学習サービスを提供しているものも多く、条件に合うものを見つけるのに苦労しますよね。
以下の記事ではJavaを入門レベルから勉強できるおすすめ学習サービスをご紹介しています。
Spring FrameworkやThymeleafがカリキュラムに含まれているものがあるので、ぜひ参考にしてください！

Javaを入門レベルから勉強できるおすすめ学習サービス7選

実行環境

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

開発および実行環境がない人は、以下の記事を参考に構築してください。

Spring BootとThymeleafを導入してHello worldを表示する方法

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

今回は、Thymeleafでラジオボタンとチェックボックスを実装する方法をご紹介します。
また、ラジオボタンとチェックボックスの初期値の設定方法も掲載しています。ぜひ参考にしてください。

サンプルとして以下のようなラジオボタンとチェックボックスを作成します。

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

Thymeleafでラジオボタンとチェックボックスを実装する手順は以下のとおりです。

Controllerクラスを作成する
テンプレートファイルを作成する
動作を確認する

また、フォルダ構成は以下のとおりです。

src/main/java/com.example.controller
 ├─ RadioController.java
src/main/resources/templates
 └─ radio.html

Controllerクラスを作成する

はじめに、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については、以下の記事を参考にしてください。

Thymeleafで繰り返し文th:eachを使用する方法

動作を確認する

最後に、ブラウザで「http://localhost:8080/radio」にアクセスして動作を確認します。
以下のように表示されていたら、動作の確認は完了です。

お疲れさまでした

今回は、Thymeleafでラジオボタンとチェックボックスを実装する方法をご紹介しました。
少しでも参考になれば幸いです。

ThymeleafとSpringを一度に学びたくありませんか？

以下の書籍は、Thymeleafを書籍で学びたい人やThymeleafと併せてSpring Frameworkを学習したい人におすすめしている書籍です。
Springについての書籍ですが、Thymeleafの基礎や基本構文から他システムとの連携等30ページほど取り上げられており、ThymeleafとSpringを一度に学べる書籍になっています。
ぜひ一度手に取ってみてください。