Razor组件中取消选中单选按钮及绑定checked属性的问题

原生单选按钮（radio）默认逻辑是同一组内只能选中一个，且选中后无法通过再次点击取消。要实现可取消选中的效果，需要通过绑定变量来控制选中状态，具体实现如下：

步骤1：定义状态变量 #

在组件类中声明一个可空整数变量，用于跟踪当前选中的选项索引（null表示未选中）：

private int? SelectedAnswerIndex { get; set; }
// 假设你的选项集合示例
private List<string> options = new List<string> { "选项1", "选项2", "选项3", "选项4" };

步骤2：重构单选按钮代码 #

修改循环中的radio元素，绑定checked属性到状态变量，同时设置相同的name确保是同一组，并用@onchange触发状态变更：

@for (int i = 0; i < options.Count; i++)
{
    int answerIndex = i;
    <input type="radio" 
           name="answerGroup" 
           checked="@(SelectedAnswerIndex == answerIndex)" 
           @onchange="() => Answer(answerIndex)" /> 
    @options[i]
    <br />
}

步骤3：实现Answer方法 #

在方法中判断当前点击的选项是否已选中，若是则取消选中（设为null），否则设置为当前索引：

private void Answer(int answerIndex)
{
    // 当前选项已选中则取消，否则选中该选项
    SelectedAnswerIndex = SelectedAnswerIndex == answerIndex ? null : answerIndex;
}

原绑定无效的原因 #

• 之前直接使用checked=@boolean但未正确关联状态更新逻辑，Blazor需要状态变量变更后触发组件重新渲染，才能同步UI状态。
• 用@onclick不如@onchange适配radio组件，因为radio的选中状态确认是在change事件触发时完成的，click事件可能在状态变更前执行。

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