40

如果使用 Blazor 框架检查复选框值，我试图找到它，但到目前为止我找不到任何方法。当我将绑定放在复选框中时，它总是被选中。我无法弄清楚如何获得检查值。

这是我的代码：

<input type="checkbox" id="addition" name="math" value="add" bind="@name" />
<label for="addition">Addition</label>
4

8 回答 8

32 
@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;
    }

}
于 2018-11-27T11:06:20.650 回答
29

将复选框值绑定到布尔值。

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

在您的 HTML 中：

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

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

于 2019-11-27T01:11:02.083 回答
11

我不认为其他任何答案都能满足我的要求：

  1. 将复选框的初始值设置为我的变量，可以是真或假
  2. 让我响应复选框 onchange 事件以将更改发送回服务器或在选中/取消选中复选框时执行一些其他工作。

我的解决方案完成了这两件事，但需要为已检查和未检查的版本重复标记。

剃刀文件如下所示：

 @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;
        }
    }

}
于 2019-11-25T18:44:23.137 回答
6

删除 value 属性：

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

将此属性添加到 @function 块或从 BlazorCoponent 派生的类：

public bool name {get;set;}

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

希望这可以帮助...

于 2018-07-09T00:14:04.740 回答
5

您必须删除该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;
   }
}
于 2018-07-08T18:06:14.567 回答
2

你可以试试这个：

<input type="checkbox" @bind-value="YourConditionTypeOfBool" checked="@(YourConditionTypeOfBool?"checked":null)"/>&nbsp; Is True
<span>My condition is @(YourConditionTypeOfBool?"True":"False")</span>

并且在您后面的代码中，您需要定义您的 YourConditionTypeOfBool 变量，例如：

@code{
     bool YourConditionTypeOfBool = true;
}
于 2021-12-22T03:21:24.633 回答
1

您可以在后面的代码中创建一个道具来将此值绑定到并使用绑定值属性。

道具定义将类似于 public bool name {get;set;}

然后你可以使用@bind-value attr

<input type="checkbox" id="name" @bind-value=name class="form-check-input">

或者您可以使用 InputCheckbox 内置组件

<InputCheckbox @bind-Value="starship.IsValidatedDesign" />

https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#built-in-forms-components

*忘了提到 InputCheckbox 必须在 EditForm 内

于 2021-02-12T19:15:34.267 回答
0

我被带到这里主要是因为我只是想仔细检查语法，因为我有点脑筋急转弯，这仍然是 Google 上的最高结果。我的特定场景类似于 Mike 的场景，因为我需要复选框的更改事件来驱动另一个组件是否可见。

我的解决方案使用 Flores 的建议来稍微整理一下 Mike 的想法。这只是在我的案例中使用该机制的对话框的基本内容：

<div class="modal fade show" id="newsApprove" style="display:block;background-color:rgba(10,10,10,8);" aria-modal="true" role="dialog">
    <div class="modal-dialog" style="vertical-align:central">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Dates Active</h4>
                <button type="button" class="close" @onclick="@Cancel">&times;</button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <div class="input-group-text">
                        <input type="checkbox" aria-label="Active From Now?" id="activeNow" @bind-value="isChecked" />
                    </div>
                    <label class="form-check-label" for="activeNow">Render This Active Immediately?</label>
                </div>
                @if (!isChecked)
                {
                    <div>
                        <SfDateTimePicker TValue="DateTime" Min="DateTime.Now" @bind-Value="activeFrom"></SfDateTimePicker>
                    </div>
                }
                <SfDateTimePicker TValue="DateTime" Min="DateTime.Now" @bind-Value="activeTo"></SfDateTimePicker>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn-primary" @onclick="@Save">Approve</button>
                <button type="button" class="btn-secondary" @onclick="@Cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>


@code {
    public DateTime activeTo { get; set; }
    public DateTime activeFrom { get; set; }

    private bool isChecked { get; set; } = true;

}

从那里开始，如果您确实需要在触发复选框更改事件时进行更多处理；您可以添加一个方法来执行相关处理并相应地切换 isChecked 的值。

于 2021-08-04T14:57:55.037 回答