Thymeleafでチェックボックス(checkbox)のcheckedを設定

Thymeleaf Java

Thymeleafでチェックボックス(checkbox)のcheckedを設定

以下は、Thymeleafでチェックボックスのcheckedを設定する方法の例です。
コントローラの処理も含めています。

コントローラ

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class CheckboxController {

  @GetMapping("/checkbox")
  public String showForm(Model model) {
    // 初期値を設定する
    model.addAttribute("isChecked", true);
    return "checkboxForm";
  }
}

フォームビュー (checkboxForm.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>チェックボックスフォーム</title>
</head>
<body>
  <form th:action="@{/submit}" method="post">
    <label>
      <input type="checkbox" name="agree" th:checked="${isChecked}" /> 同意する
    </label>
    <button type="submit">送信</button>
  </form>
</body>
</html>

これにより、チェックボックスが初期状態でチェックされているフォームが表示されます。

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

複数のチェックボックスがある場合の例を以下に示します。

コントローラ

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@Controller
public class CheckboxController {

  @GetMapping("/checkbox")
  public String showForm(Model model) {
    // 初期値を設定する
    model.addAttribute("option1", true);
    model.addAttribute("option2", false);
    model.addAttribute("option3", true);
    return "checkboxForm";
  }
}

フォームビュー (checkboxForm.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>チェックボックスフォーム</title>
</head>
<body>
  <form th:action="@{/submit}" method="post">
    <label>
      <input type="checkbox" name="option1" th:checked="${option1}" /> オプション1
    </label>
    <br />
    <label>
      <input type="checkbox" name="option2" th:checked="${option2}" /> オプション2
    </label>
    <br />
    <label>
      <input type="checkbox" name="option3" th:checked="${option3}" /> オプション3
    </label>
    <br />
    <button type="submit">送信</button>
  </form>
</body>
</html>

これにより、複数のチェックボックスがそれぞれ初期状態で設定されます。