如何用Thymeleaf和Spring生成一组未选中的单选按钮？

核心原因 #

Thymeleaf的th:field会优先根据绑定的Bean属性值设置单选按钮的选中状态，手动添加的th:checked会被直接覆盖。如果Bean中对应属性有默认值（比如非空字符串、枚举值），就会自动匹配选中对应单选按钮；若属性为null，Thymeleaf不会标记选中项，但部分浏览器会默认选中第一个选项，这是浏览器自身的默认行为。

可行解决方案 #

1. 初始化Bean属性为null #

确保表单Bean中绑定单选按钮的属性初始值设为null，不要给默认值：

public class FormBean {
    // 初始化为null，避免默认匹配选项
    private String property;

    // 对应getter、setter方法
}

模板中正常使用th:field，无需添加th:checked：

<input type="radio" th:field="*{property}" th:value="option1" />选项1
<input type="radio" th:field="*{property}" th:value="option2" />选项2

2. 后端校验强制用户选择 #

用Spring校验注解确保提交时该属性必须有值，即便浏览器默认选中某项，用户未主动选择就提交会触发校验错误。
在Bean中添加校验注解：

import javax.validation.constraints.NotNull;

public class FormBean {
    @NotNull(message = "请选择一个选项")
    private String property;

    // 对应getter、setter方法
}

控制器方法中处理校验逻辑：

@PostMapping("/submit")
public String submitForm(@Valid FormBean form, BindingResult result) {
    if (result.hasErrors()) {
        // 校验失败返回表单页面
        return "form";
    }
    // 处理表单提交逻辑
    return "success";
}

模板中添加错误提示：

<div th:if="${#fields.hasErrors('property')}" th:errors="*{property}" class="error-text"></div>

3. 抑制浏览器默认选中行为 #

给第一个单选按钮添加autocomplete="off"属性，部分浏览器会遵循该设置，不自动选中第一个选项：

<input type="radio" th:field="*{property}" th:value="option1" autocomplete="off" />选项1
<input type="radio" th:field="*{property}" th:value="option2" />选项2

注：该方法兼容性有限，建议配合后端校验一起使用。

内容的提问来源于stack exchange，提问作者Easterwood