Blazor 服务器：单击/勾选另一个复选框时，上一个复选框不会自动取消选中

Question

假设我有来自数据库的数据，我想像这样加载它

在我的剃须刀组件中我有这个 `

 @if(selectedUser != null){
      @foreach (var items in User)
       {
         <tr>

   <td><input type="checkbox" @bind="valueChanged" @onclick="()=>ShowProfile(items)"> @items.CarestaffId </td>
       <td>@items.FirstName @items.MiddleInitial. @items.LastName</td>
       <td> @items.Title </td>
       <td> @items.Status  </td>
    </tr>
  }
}`

在我的 C# 代码中

`

    //this is a hidden div that will appear if checkbox was ticked
    private bool DisplayProfile { get; set; } = true;

    private bool valueChanged { get; set; } = false;

    private User selectedUser;

    private void ShowProfile(User user)
    {
        valueChanged = true;
        selectedUser= user;
        if(valueChanged)
        {
            DisplayProfile = false;
        }
    }`

我想要的是当我检查另一个复选框时自动取消选中前一个复选框，因为当我尝试操作该复选框时，当值更改时，所有复选框都被选中/取消选中。

Answer 1

这里的问题是您将每个复选框绑定到一个字段

valueChanged

。因此，当该值为 false 时，每个复选框都将“关闭”，反之亦然。

您可能想要做的是将复选框绑定到

User

类中的字段。比如：

public class User {
   // your actuel class
   public bool IsChecked {get; set;} // add this field
}
----
<td><input type="checkbox" @bind="items.IsChecked" @onclick="()=>ShowProfile(items)"> @items.CarestaffId </td>

顺便说一句，我建议您重命名在 foreach 循环中使用的名称：

@foreach (var items in User)

变成

@foreach (var user in Users)

，这样会更符合逻辑。