在MudBlazor中实现全选复选框：解决状态同步及控件展开问题

问题概述 #

需要实现类似多选Select但复选框列表始终可见的功能，当前使用@bind-Value结合@oninput实现时，@oninput会在复选框值变更前触发，导致“全选”状态滞后一次选择。希望找到更优绑定方式，或了解能否让Select控件保持展开，备选方案考虑使用MudTable。

解决方案 #

1. 替换@oninput为@onchange解决滞后问题 #

@oninput是在输入事件触发（比如点击复选框瞬间）就执行，此时绑定的值还未完成更新；而@onchange是在值确认变更后触发，刚好匹配需求。修改后无需手动调用StateHasChanged()，绑定机制会自动同步UI。

修正后的核心代码如下：

<MudCheckBox @bind-Value="@AllSelected" @onchange="OnAllSelectedChanged" Label="Select All">@AllSelected</MudCheckBox>

@foreach (var site in Sites)
{
    <MudCheckBox @bind-Value="@site.IsSelected" @onchange="CheckboxChanged" Label="@site.Name">@site.IsSelected</MudCheckBox>        
}

<MudTextField Label="Log" Variant="Variant.Filled" AutoGrow @bind-Value="@log"></MudTextField>

@code{ 
    public bool? AllSelected = null;
    public List<Site> Sites = new List<Site>();
    public string log = "";

    public class Site
    {
        public int Id;
        public string Name;
        public bool IsSelected;
    }

    protected override async Task OnInitializedAsync()
    {
        Sites.Add(new Site{Id=1,Name="Site1",IsSelected=false});
        Sites.Add(new Site{Id=2,Name="Site2",IsSelected=true});
        Sites.Add(new Site{Id=3,Name="Site3",IsSelected=true});
        UpdateAllSelectedState(); // 初始化时同步全选状态
    }

    private void OnAllSelectedChanged()
    {        
        foreach (var site in Sites)
        {
            site.IsSelected = AllSelected ?? false;
        }
        log += $"全选框状态变更为: {AllSelected}\r\n";
    }

    private void CheckboxChanged()
    {        
        UpdateAllSelectedState();
        log += $"复选框状态变更，当前全选状态: {AllSelected}\r\n";
    }

    // 提取公共逻辑，同步全选框状态
    private void UpdateAllSelectedState()
    {
        var allSelected = Sites.All(x => x.IsSelected);
        var noneSelected = Sites.All(x => !x.IsSelected);
        
        if (allSelected)
            AllSelected = true;
        else if (noneSelected)
            AllSelected = false;
        else
            AllSelected = null;
    }
}

2. 关于Select控件保持展开 #

MudBlazor的MudSelect组件没有内置“始终展开”的配置项，因为它的设计逻辑是下拉式交互。如果强行通过自定义CSS强制显示下拉面板，会破坏组件的原生交互（比如点击外部收起的逻辑），因此不推荐这种做法。

3. 备选方案：MudTable #

如果需要始终可见的复选框列表，MudTable是更合适的选择。它原生支持批量选择、全选功能，还能配合分页、排序、过滤等特性，比手动循环渲染复选框更健壮易维护。你可以通过MudTable的MultiSelection属性开启多选，搭配ToolbarContent实现全选按钮，完全满足需求。

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