Thymeleafでチェックボックス(checkbox)の処理を実装

Java Thymeleaf

Thymeleafでチェックボックス(checkbox)の処理を実装

Thymeleafでチェックボックスの処理を実装する方法について、以下のコードを参考にしてください。
フォームのクラス、Thymeleafテンプレート、コントローラの処理を含めています。

フォームのクラス

// CheckboxForm.java
package com.example.demo.form;

public class CheckboxForm {
  private boolean agreeTerms;

  // Getter and Setter
  public boolean isAgreeTerms() {
    return agreeTerms;
  }

  public void setAgreeTerms(boolean agreeTerms) {
    this.agreeTerms = agreeTerms;
  }
}

Thymeleafテンプレート

<!-- checkboxForm.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>チェックボックスフォーム</title>
</head>
<body>
  <form th:action="@{/submitCheckboxForm}" th:object="${checkboxForm}" method="post">
    <div>
      <label>
        <input type="checkbox" th:field="*{agreeTerms}"/>
        利用規約に同意する
      </label>
    </div>
    <div>
      <button type="submit">送信</button>
    </div>
  </form>
</body>
</html>

コントローラの処理

// CheckboxController.java
package com.example.demo.controller;

import com.example.demo.form.CheckboxForm;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class CheckboxController {

  @GetMapping("/checkboxForm")
  public String showForm(Model model) {
    model.addAttribute("checkboxForm", new CheckboxForm());
    return "checkboxForm";
  }

  @PostMapping("/submitCheckboxForm")
  public String submitForm(CheckboxForm form, Model model) {
    model.addAttribute("message", form.isAgreeTerms() ? "同意しました。" : "同意しませんでした。");
    return "checkboxResult";
  }
}

結果表示用のThymeleafテンプレート

<!-- checkboxResult.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>結果</title>
</head>
<body>
  <p th:text="${message}"></p>
  <a href="/checkboxForm">戻る</a>
</body>
</html>

これで、チェックボックスの状態をフォームで送信し、結果を表示する一連の処理が完成します。

チェックボックスが複数ある場合

チェックボックスが複数ある場合の実装方法について、以下のコードを参考にしてください。
複数のチェックボックスを扱うために、フォームクラスを拡張し、Thymeleafテンプレートを更新し、コントローラの処理を調整します。

フォームのクラス

// MultiCheckboxForm.java
package com.example.demo.form;

import java.util.List;

public class MultiCheckboxForm {
  private List<String> selectedOptions;

  // Getter and Setter
  public List<String> getSelectedOptions() {
    return selectedOptions;
  }

  public void setSelectedOptions(List<String> selectedOptions) {
    this.selectedOptions = selectedOptions;
  }
}

Thymeleafテンプレート

<!-- multiCheckboxForm.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>チェックボックスフォーム</title>
</head>
<body>
  <form th:action="@{/submitMultiCheckboxForm}" th:object="${multiCheckboxForm}" method="post">
    <div>
      <label>
        <input type="checkbox" th:field="*{selectedOptions}" value="Option1"/>
        オプション1
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" th:field="*{selectedOptions}" value="Option2"/>
        オプション2
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" th:field="*{selectedOptions}" value="Option3"/>
        オプション3
      </label>
    </div>
    <div>
      <button type="submit">送信</button>
    </div>
  </form>
</body>
</html>

コントローラの処理

// MultiCheckboxController.java
package com.example.demo.controller;

import com.example.demo.form.MultiCheckboxForm;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class MultiCheckboxController {

  @GetMapping("/multiCheckboxForm")
  public String showForm(Model model) {
    model.addAttribute("multiCheckboxForm", new MultiCheckboxForm());
    return "multiCheckboxForm";
  }

  @PostMapping("/submitMultiCheckboxForm")
  public String submitForm(MultiCheckboxForm form, Model model) {
    model.addAttribute("selectedOptions", form.getSelectedOptions());
    return "multiCheckboxResult";
  }
}

結果表示用のThymeleafテンプレート

<!-- multiCheckboxResult.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>結果</title>
</head>
<body>
  <p>選択したオプション:</p>
  <ul>
    <li th:each="option : ${selectedOptions}" th:text="${option}"></li>
  </ul>
  <a href="/multiCheckboxForm">戻る</a>
</body>
</html>

これで、複数のチェックボックスの状態をフォームで送信し、結果を表示する一連の処理が完成します。