Blazor中使用EditForm动态获取多复选框值的问题

Blazor的Input系列组件（包括InputCheckbox）的@bind-Value底层依赖FieldIdentifier，它不支持直接绑定到List<bool>、布尔数组这类集合的索引项（比如myList[i]这种表达式），这就是你遇到ArgumentException的原因。下面是几种可行的解决方法：

方法一：使用带布尔属性的自定义模型集合（推荐） #

这种方式最符合Blazor的数据绑定设计，代码可读性和可维护性最好。

步骤1：定义复选框模型 #

public class CheckboxOption
{
    public string DisplayText { get; set; }
    public bool IsSelected { get; set; }
    // 可按需添加其他属性，比如Id、分组标识等
}

步骤2：组件中使用模型集合绑定 #

<!-- 渲染动态复选框 -->
@foreach (var option in CheckboxOptions)
{
    <div class="checkbox-item">
        <InputCheckbox @bind-Value="option.IsSelected" />
        <label>@option.DisplayText</label>
    </div>
}

<button @onclick="ProcessSelections">处理选中项</button>

@code {
    // 初始化复选框选项
    private List<CheckboxOption> CheckboxOptions = new()
    {
        new CheckboxOption { DisplayText = "前端开发", IsSelected = false },
        new CheckboxOption { DisplayText = "后端开发", IsSelected = true },
        new CheckboxOption { DisplayText = "DevOps", IsSelected = false }
    };

    private void ProcessSelections()
    {
        // 获取所有选中的选项
        var selectedOptions = CheckboxOptions.Where(opt => opt.IsSelected).ToList();
        // 后续业务逻辑处理
    }
}

方法二：手动绑定（适配List/布尔数组） #

如果必须使用List<bool>或布尔数组，可以绕过@bind-Value，手动处理值的绑定逻辑，避开FieldIdentifier的限制。

<!-- 注意使用for循环而非foreach，同时捕获循环变量index -->
@for (int i = 0; i < CheckboxValues.Count; i++)
{
    var currentIndex = i; // 必须捕获变量，否则会出现闭包引用问题
    <div>
        <InputCheckbox 
            Value="CheckboxValues[currentIndex]"
            ValueChanged="@(newValue => CheckboxValues[currentIndex] = newValue)"
            ValueExpression="@(() => CheckboxValues[currentIndex])" />
        <label>选项@(currentIndex + 1)</label>
    </div>
}

@code {
    private List<bool> CheckboxValues = new() { false, true, false };
}

这里的关键是捕获循环变量currentIndex，否则所有复选框都会绑定到循环结束后的最后一个索引值。

方法三：封装自定义复选框组件 #

如果需要在多个页面复用动态复选框逻辑，可以封装一个独立的组件：

自定义组件CustomCheckbox.razor #

<div class="custom-checkbox">
    <input type="checkbox" checked="@Value" @onchange="HandleChange" />
    <label>@Label</label>
</div>

@code {
    [Parameter, Required]
    public string Label { get; set; }

    [Parameter, Required]
    public bool Value { get; set; }

    [Parameter, Required]
    public EventCallback<bool> ValueChanged { get; set; }

    private async Task HandleChange(ChangeEventArgs e)
    {
        var newValue = (bool)e.Value;
        await ValueChanged.InvokeAsync(newValue);
    }
}

父组件中使用自定义组件 #

@for (int i = 0; i < CheckboxValues.Count; i++)
{
    var currentIndex = i;
    <CustomCheckbox 
        Label="选项@(currentIndex + 1)"
        Value="CheckboxValues[currentIndex]"
        ValueChanged="@(newValue => CheckboxValues[currentIndex] = newValue)" />
}

@code {
    private List<bool> CheckboxValues = new() { false, true, false };
}

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