如何通过CSS实现多个复选框互斥选中（仅可选1个或全不选）

结论 #

纯CSS无法实现你要的互斥选中效果

原因说明 #

CSS仅负责样式渲染，只能基于DOM元素已有的原生状态（比如:checked伪类）调整展示效果，没有能力主动修改DOM元素的checked属性值。你可能见过用CSS实现的看起来互斥的复选框效果，但那只是修改了展示样式，实际另外两个复选框的checked属性还是为true，业务逻辑触发时还是会读到选中状态，不符合实际使用需求。

可行实现方案 #

方案1：改用原生单选框（最简便） #

把三个<input>的type属性从checkbox改为radio，同时给三个设置相同的name属性，原生就能实现最多选中一个的互斥效果。如果需要支持点击已选中的单选框取消选中，只要加一行简单的点击逻辑即可，原有业务点击逻辑几乎不需要调整。
修改后的代码示例：

<label class="col-1 remove-check checkbox-container">
    <input type="radio" name="operate_group" @onclick="@(async () => await OnRemoveClick(slh.Key, slh.Value))" />
        <span class="checkmark-detail"></span>
</label>
<label class="col-1 redirect-check checkbox-container">
    <input type="radio" name="operate_group" @onclick="@(async () => await OnRedirectClick(slh.Key, slh.Value))" />
           <span class="checkmark-detail"></span>
</label>
<label class="col-1 approve-check checkbox-container">
    <input type="radio" name="operate_group" @onclick="@(async () => await OnApproveClick(slh.Key, slh.Value))" />
           <span class="checkmark-detail"></span>
</label>

原有复选框的样式只要稍作适配就能直接用在单选框上，不需要大改。

方案2：保留复选框，用JS/Blazor逻辑控制 #

如果你必须保留checkbox类型，只要在每个点击事件的触发逻辑里，手动把另外两个复选框的选中状态设置为未选中即可。你当前用的是Blazor框架，直接绑定三个布尔值变量，每次点击对应项的时候把另外两个变量设为false即可实现效果。

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