单击其中一个时如何使用Blazor更改多个复选框 [英] How to change multiple checkboxes with Blazor when clicking one of them

查看:222
本文介绍了单击其中一个时如何使用Blazor更改多个复选框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

第1部分:

我可以使用onchange了:

I got the onchange to work with:

<input type="checkbox" value="@ShowMe" @onchange="(e => ChangeBox(e, 13))" />

在代码部分中,我有:

protected bool ShowMe { get; set; } = true;

private void ChangeBox(ChangeEventArgs e, int id)
{

}

单击复选框时,我进入事件处理程序,这样可以解决问题.但是,在首次加载时打开页面时,即使ShowMe设置为true,也不会选中此复选框.

When clicking the checkbox I get into the event handler so that works out. However when opening the page on the first load the checkbox is not selected even though ShowMe is set to true.

第2部分:

我想要得到的是一个foreach来制作一个表,其中有几列是这样的复选框:

What I'm trying to get to is a foreach to make a table with several columns being checkboxes like this:

Concern    Phase 1     Phase 2     Phase 3
1          false       false       false
2          false       false       false
2          false       false       false
2          false       false       false
3          false       false       false

现在,当我单击关注点2"的阶段1"列中的复选框时,所有3个复选框应变为真,例如:

now when I click on a checkbox in column Phase 1 for Concern 2 then all 3 checkboxes should become true like:

Concern    Phase 1     Phase 2     Phase 3
1          false       false       false
2          true        false       false
2          true        false       false
2          true        false       false
3          false       false       false

我绑定到private ConcernData[] data

public class ConcernData
{
    public int Concern { get; set; }
    public bool Phase1 { get; set; }
    public bool Phase2 { get; set; }
    public bool Phase3 { get; set; }
}

并通过HttpClient Get调用获取.

And fetched via an HttpClient Get call.

推荐答案

您需要为复选框绑定检查属性而不是值:

You need to bind checked attribute not value for a checkbox:

<input type="checkbox" checked="@ShowMe" @onchange="(e => ChangeBox(e, 13))" />

Ref: https://github.com/dotnet/aspnetcore/blob/master/src/Components/Web/src/Forms/InputCheckbox.cs

这篇关于单击其中一个时如何使用Blazor更改多个复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆