Thymeleafでチェックボックス(checkbox)の初期値を設定

Java Thymeleaf

Thymeleafでチェックボックス(checkbox)の初期値を設定

Thymeleafでチェックボックスの初期値を設定する方法について、以下のように実装できます。

コントローラのコード (Java)

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

@Controller
public class CheckboxController {

  @GetMapping("/form")
  public String showForm(Model model) {
    // チェックボックスの初期値を設定
    boolean isChecked = true; // 初期値を設定

    model.addAttribute("isChecked", isChecked);
    return "form";
  }
}

Thymeleafのテンプレート (form.html)

<!DOCTYPE html>
<html>
<head>
  <title>チェックボックスフォーム</title>
</head>
<body>
  <form action="/submit" method="post">
    <label>
      <input type="checkbox" name="checkbox" th:checked="${isChecked}" />
      チェックボックス
    </label>
    <button type="submit">送信</button>
  </form>
</body>
</html>

このコードでは、showForm メソッドでチェックボックスの初期値を設定し、form.html テンプレートでその値を表示しています。

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

チェックボックスが複数ある場合の実装例を示します。
以下の例では、複数のチェックボックスをフォームに含め、それぞれの初期値を設定し、選択された値を受け取る方法を説明します。

コントローラのコード (Java)

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

import java.util.Map;
import java.util.HashMap;

@Controller
public class CheckboxController {

  @GetMapping("/form")
  public String showForm(Model model) {
    // チェックボックスの初期値を設定
    Map<String, Boolean> checkboxValues = new HashMap<>();
    checkboxValues.put("option1", true);  // 初期値を設定
    checkboxValues.put("option2", false); // 初期値を設定
    checkboxValues.put("option3", true);  // 初期値を設定

    model.addAttribute("checkboxValues", checkboxValues);
    return "form";
  }
}

Thymeleafのテンプレート (form.html)

<!DOCTYPE html>
<html>
<head>
  <title>チェックボックスフォーム</title>
</head>
<body>
  <form action="/submit" method="post">
    <label>
      <input type="checkbox" name="option1" th:checked="${checkboxValues['option1']}" />
      オプション 1
    </label>
    <br />
    <label>
      <input type="checkbox" name="option2" th:checked="${checkboxValues['option2']}" />
      オプション 2
    </label>
    <br />
    <label>
      <input type="checkbox" name="option3" th:checked="${checkboxValues['option3']}" />
      オプション 3
    </label>
    <br />
    <button type="submit">送信</button>
  </form>
</body>
</html>

この例では、複数のチェックボックスをフォームに含め、それぞれの初期値を設定しています。