th:field导致HTML单选框checked属性失效问题排查

你的问题出在Thymeleaf的th:field属性会完全接管表单控件的状态，包括单选框的选中状态，原生的checked属性会被它直接覆盖。

具体问题点： #

1. th:field的优先级更高：th:field="*{type}"是Thymeleaf的双向数据绑定语法，它会严格根据你后端绑定的模型对象中type属性的值，来决定哪个单选框被选中。如果你的模型里type的值不是'Flight'，哪怕你写了原生checked，Thymeleaf也会忽略这个属性，完全按照模型值渲染选中状态。
2. 单选框name属性错误：单选框要实现互斥选择，同一组的name必须相同，但你给每个单选框写了不同的name（flight/bus/personal），这会导致它们无法互斥。不过th:field会自动给所有绑定同一个*{type}的单选框设置相同的name，所以你手动写的name完全多余且错误，应该删掉。

解决办法： #

方法1：后端设置默认值（推荐）

在你绑定表单的实体类中，给type属性设置默认值为"Flight"，比如：

public class YourForm {
    private String type = "Flight"; // 设置默认选中值
    // 其他属性、getter、setter方法
}

这样Thymeleaf渲染页面时，会自动匹配th:value="'Flight'"的单选框，将其设为选中状态，完全不需要原生checked属性。

方法2：Thymeleaf条件判断（冗余但可用）

如果不想修改后端，可以用th:checked做条件判断，但本质还是基于模型值：

<ul>
    <li>
        <input type="radio" th:field="*{type}" th:value="'Flight'" id="flight" th:checked="*{type} == 'Flight'">
        <label for="flight" th:text="'Flight'"/>
    </li>
    <li>
        <input type="radio" th:field="*{type}" th:value="'Bus'" id="bus">
        <label for="bus" th:text="'Bus'"/>
    </li>
    <li>
        <input type="radio" th:field="*{type}" th:value="'Personal'" id="personal">
        <label for="personal" th:text="'Personal'"/>
    </li>
</ul>

不过这种方式有点冗余，因为th:field本身就会根据模型值处理选中状态，更推荐用方法1保持数据一致性。

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