Blazor中Checkbox状态异常问题及GetElementById替代方案咨询

1. 修复Checkbox勾选后残留状态的问题 #

你的核心问题在于用Dictionary手动管理checked属性，没利用Blazor的数据绑定机制，导致DOM状态和模型状态不同步。另外，修改待办项状态时完全没必要移除再重新添加，直接更新属性即可。

修改步骤： #

• 删掉Attributes字典相关代码，直接在Checkbox上绑定checked属性：

<input id="@item.Id" class="form-check-input me-2" type="checkbox" aria-label="..." 
       checked="@item.IsChecked"
       @onchange="eventArgs => CheckboxClicked(item, eventArgs.Value)" />

• 简化CheckboxClicked方法，直接更新模型属性：

void CheckboxClicked(KBuddy.Data.ShoppingList.ShopItem item, object checkedValue)
{
    item.IsChecked = (bool)checkedValue;
    // 若视图模型实现了INotifyPropertyChanged，这里可触发属性变更通知；否则Blazor会自动检测状态变化并重新渲染
}

这样修改后，在ACTIVE视图勾选Checkbox时，item.IsChecked变为true，该项会自动从ACTIVE筛选列表中消失，DOM上的Checkbox状态也会和模型完全同步，不会出现残留勾选的情况。

2. Blazor中替代GetElementById的方式 #

Blazor是数据驱动UI的框架，优先推荐通过绑定模型控制UI，尽量避免直接操作DOM。如果确实需要和DOM元素交互，有两种常用方式：

方式一：使用ElementReference #

给目标元素添加@ref指令获取引用，再通过IJSRuntime调用JavaScript操作：

<input @ref="myCheckbox" type="checkbox" />

@code {
    private ElementReference myCheckbox;
    [Inject] private IJSRuntime JSRuntime { get; set; }

    private async Task DoSomething()
    {
        // 调用JS操作元素，示例：设置勾选状态
        await JSRuntime.InvokeVoidAsync("setCheckboxChecked", myCheckbox, true);
    }
}

对应的JavaScript（可放在_Host.cshtml或独立JS文件）：

function setCheckboxChecked(element, isChecked) {
    element.checked = isChecked;
}

方式二：利用组件参数和数据绑定 #

绝大多数场景下，你不需要直接操作DOM，而是通过绑定组件参数或模型属性来控制UI状态——就像前面修复Checkbox问题那样，通过checked="@item.IsChecked"让UI自动跟随模型变化，这也是Blazor的设计初衷。

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