要解决这个问题,您可以使用Blazor的双向绑定功能和事件处理程序。以下是一个示例代码,演示了如何实现这一点:
@page "/checkbox-demo"
复选框示例
@foreach (var item in items)
{
ToggleCheckbox(item))" />
}
@code {
public class Item
{
public int Id { get; set; }
public string Name { get; set; }
public bool IsChecked { get; set; }
}
List- items = new List
-
{
new Item { Id = 1, Name = "选项1", IsChecked = false },
new Item { Id = 2, Name = "选项2", IsChecked = false },
new Item { Id = 3, Name = "选项3", IsChecked = false }
};
void ToggleCheckbox(Item item)
{
item.IsChecked = !item.IsChecked;
// 如果当前项被选中,则取消其他项的选择
if (item.IsChecked)
{
foreach (var otherItem in items.Where(x => x != item))
{
otherItem.IsChecked = false;
}
}
}
}
在此示例中,我们首先定义了一个Item
类,用于表示每个复选框的状态。然后,我们创建了一个包含多个Item
对象的列表。在页面中,我们使用foreach
循环遍历列表,并为每个复选框绑定checked
属性和onchange
事件处理程序。
在ToggleCheckbox
方法中,我们切换当前复选框的选中状态,并检查如果当前复选框被选中,则取消其他复选框的选中状态。
通过这种方式,每次点击复选框时,先前选中的复选框会自动取消选中,而当前复选框会保持选中状态。