.NET Core Blazor:如果选中了复选框,如何获取其值?

@page "/registration"

    @foreach (var club in ClubList())
    {
        <input type="checkbox" @onchange="eventArgs => { CheckboxClicked(club, eventArgs.Value); }" />@club<br />
    }

@functions {

    public List<string> ClubMember { get; set; } = new List<string>();
    void CheckboxClicked(string clubID, object checkedValue)
    {
        if ((bool)checkedValue)
        {
            if (!ClubMember.Contains(clubID))
            {
                ClubMember.Add(clubID);
            }
        }
        else
        {
            if (ClubMember.Contains(clubID))
            {
                ClubMember.Remove(clubID);
            }
        }
    }

    public List<String> ClubList()
    {
        // fetch from API or...
        List<String> c = new List<String>();
        c.Add("Clube01");
        c.Add("Clube02");
        return c;
    }

}

将复选框值绑定到bool值。

在@Code中,bool checkedValue=false;//如果适合您的用例,则为true

<input type="checkbox" checked @bind="checkedValue">

checkedValue的值将与您的复选框具有相同的值。

删除值属性:

<input type="checkbox" id="addition" name="math" bind="@name" />

public bool name {get;set;}

现在,复选框的值绑定到name属性 您可以访问包含复选框值的这个属性来检索复选框的值,就像访问其他属性一样。

希望这有帮助。。。

我不认为其他任何答案能满足我的要求,那就是:

我的解决方案实现了这两个功能,但是需要重复标记 对于选中和未选中的版本。

 @if (Approved)
 {
    <input type="checkbox" checked @onchange="@(async (e) => 
              await ToggleApprovedAsync(false))" />
 }
 else
 {
     <input type="checkbox"  @onchange="@(async (e) => 
              await ToggleApprovedAsync(true))" />
 }


@code {

    bool Approved;

    override async Task OnInitializedAsync()
    {
        Approved = await HttpClient.GetJsonAsync<bool>("../api/IsApproved");
    }

    async Task ToggleApprovedAsync(bool approved)
    {
        Console.WriteLine("Toggle Approved " + approved );
        if (approved)
        {
            await HttpClient.PostJsonAsync<bool>($"../api/Approve", null);
            Approved = true;
        }
        else
        {
            await HttpClient.PostJsonAsync<bool>($"../api/Disapprove", null);
            Approved = false;
        }
    }

}

你必须移除 value="add"

name

编辑:完整示例

@page "/test2"

<input type="checkbox" bind="@boolvalue" /><br/>
Boolvalue: @boolvalue<br/>
<button onclick="@toggle">toggle</button>

@functions
{

   public bool boolvalue { get; set; }

   void toggle()
   {
       boolvalue = !boolvalue;
   }
}