Thymeleaf入门求助：如何将单选按钮值1/5对应显示为single/group

别担心，刚上手Thymeleaf确实会有点摸不着头脑，我来一步步带你实现把单选按钮值映射成自定义标签的需求～

如果你的需求很简单（只有1和5两个值），直接在模板里用三元条件表达式就能快速搞定。假设你的模型属性名为selection（后端已经通过model.addAttribute("selection", ...)传到模板里了），代码可以这么写：

<!-- 对应值1的单选按钮 -->
<input type="radio" th:field="${selection}" value="1">
<label th:text="${selection == 1 ? 'single' : ''}">single</label>

<!-- 对应值5的单选按钮 -->
<input type="radio" th:field="${selection}" value="5">
<label th:text="${selection == 5 ? 'group' : ''}">group</label>

小解释： #

• th:field="${selection}"：Thymeleaf的表单绑定指令，会自动关联模型里的selection属性，处理选中状态。
• th:text="${selection == 1 ? 'single' : ''}"：三元表达式判断，如果selection的值是1，就显示single，否则显示空（也可以保留默认文本作为降级方案）。

如果以后可能要加更多值，或者不想把硬编码的逻辑写在前端，推荐在后端定义一个映射关系，传到模板里使用：

后端代码（以Spring Boot为例）： #

@GetMapping("/your-page")
public String showForm(Model model) {
    // 定义值和标签的映射
    Map<Integer, String> optionMap = new HashMap<>();
    optionMap.put(1, "single");
    optionMap.put(5, "group");
    
    // 把映射和模型属性传到模板
    model.addAttribute("optionLabels", optionMap);
    model.addAttribute("selection", 1); // 这里可以是默认值或者从数据库/请求中获取的值
    
    return "your-template-name";
}

前端Thymeleaf代码： #

<!-- 对应值1的单选按钮 -->
<input type="radio" th:field="${selection}" value="1">
<label th:text="${optionLabels.get(1)}">single</label>

<!-- 对应值5的单选按钮 -->
<input type="radio" th:field="${selection}" value="5">
<label th:text="${optionLabels.get(5)}">group</label>

优势： #

• 所有的映射逻辑都集中在后端，以后要修改标签或者加新值，只需要改后端的optionMap就行，不用动前端模板。
• 代码更干净，避免前端出现过多的条件判断。

如果你用的是表单对象（比如一个Java Bean来接收表单数据），那th:field要改用*{}语法，比如你的表单对象是form，属性是selection，那代码会变成：

<input type="radio" th:field="*{selection}" value="1">
<label th:text="${form.selection == 1 ? 'single' : ''}">single</label>

这样就能完美实现你要的效果啦～

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