如何在单击其中一个复选框时使用 Blazor 更改多个复选框

Question

Part 1：

我得到了

与以下工作：

<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，也不会选中该复选框。

篇二：

我试图得到的是一个foreach来制作一个表格，其中几列是复选框，如下所示：

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

现在，当我单击关注点 1 的第 1 列中的复选框时，所有 3 个复选框都应该变为真，如下所示：

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 调用获取。

Answer 1

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

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

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

Answer 2

运行此代码，看看这是否是你想要的。注意：当您选中第二个第三个或第四个复选框中的任何一个时，无论顺序如何，都会选中其中三个...

@page "/"
<table class="table">
<thead>
<tr>
<td>Concern</td>
<td>Phase1</td>
<td>Phase2</td>
<td>Phase3</td>
</tr>
</thead>
<tbody>
@foreach (var row in data.Rows)
{
<tr>
<td><label>@row.Concern</label></td>
<td><input type="checkbox" checked="@row.Phase1" @onchange="@((args) => { row.Phase1 = (bool)
args.Value; Check(row.Concern, row.Phase1);  } )" />
</td>
<td><input type="checkbox"  @bind="@row.Phase2" /></td>
<td><input type="checkbox"  @bind="@row.Phase3" /></td>

</tr>
}
</tbody>
</table>
@code{

ConcernData data = new ConcernData();
protected override void OnInitialized()
{
}
protected void Check(int row,  bool selectedValue)
{
var toCheck =  data.Rows.Where(r => r.Concern == row).ToList();
foreach (var r in toCheck)
{
r.Phase1 = selectedValue;
}
}
public class Row
{
public int Concern { get; set; }
public bool Phase1 { get; set; }
public bool Phase2 { get; set; }
public bool Phase3 { get; set; }
}
public class ConcernData
{
public List<Row> Rows = new List<Row> { new Row { Concern = 1, Phase1 = false, Phase2 = false, Phase3 = false },
new Row { Concern = 2, Phase1 = false, Phase2 = false, Phase3 = false },
new Row { Concern = 2, Phase1 = false, Phase2 = false, Phase3 = false },
new Row { Concern = 2, Phase1 = false, Phase2 = false, Phase3 = false },
new Row { Concern = 3, Phase1 = false, Phase2 = false, Phase3 = false }};

}
}

希望这有帮助...