Blazor中如何通过点击父div选中对应的单选按钮？

实现思路 #

利用Blazor的双向数据绑定，将单选按钮的选中状态与组件内的变量绑定，同时给父容器添加点击事件，点击时更新绑定变量，自动同步单选按钮的选中状态，兼顾原生单选按钮的互斥特性。

完整实现代码 #

@page "/radio-example"

<style>
    .option {
        padding: 10px;
        border: 1px solid #eee;
        margin: 5px 0;
        cursor: pointer; /* 提示用户该区域可点击 */
    }
    .option:hover {
        background-color: #f5f5f5;
    }
</style>

<div>
    <div class="option" @onclick="() => SelectedLetter = "a"">
        <input type="radio" name="Letters" value="a" @bind="SelectedLetter" />
        <a>Letter A</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="option" @onclick="() => SelectedLetter = "b"">
        <input type="radio" name="Letters" value="b" @bind="SelectedLetter" />
        <a>B</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="option" @onclick="() => SelectedLetter = "c"">
        <input type="radio" name="Letters" value="c" @bind="SelectedLetter" />
        <a>C</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="option" @onclick="() => SelectedLetter = "d"">
        <input type="radio" name="Letters" value="d" @bind="SelectedLetter" />
        <a>D</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

@code {
    // 绑定选中的单选按钮值
    private string SelectedLetter { get; set; } = "a"; // 默认选中第一个选项
}

关键说明 #

1. 双向绑定：通过@bind="SelectedLetter"将单选按钮的value与组件变量关联，变量更新时单选按钮状态自动同步，反之亦然。
2. 父容器点击事件：给每个.option容器添加@onclick事件，点击时直接将对应选项的value赋值给SelectedLetter，触发绑定同步。
3. 交互提示：通过CSS的cursor:pointer和hover效果，让用户清晰感知点击区域。

这种方式完全基于Blazor的原生机制，无需操作DOM或引入JavaScript，符合Blazor的组件开发模式。

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