Question

我正在尝试获取使用Blazor框架进行检查的复选框值，但到目前为止，我找不到任何方法。当我将绑定放在复选框中时，始终会选中它。我不知道如何获得检查值。

这是我的代码：

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

Answer 1

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

}

Answer 2

您必须删除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;
   }
}

Answer 3

删除值属性：

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

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

public bool name {get;set;}

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

希望这对您有帮助...

Answer 4

我认为没有其他答案可以满足我的要求：

将复选框的初始值设置为我的变量，可以为true或false
让我响应复选框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;
        }
    }

}

Answer 5

将复选框值绑定为bool值。

在您的@Code中，boolcheckedValue = false； //或者如果适合您的用例，则为true

在您的HTML中：

$(document).scroll(function() {
    if ($(document).scrollTop()> 200) {
      $(div1).addClass("top-position");
    } else {
      $(div1).removeClass("top-position");
    }
})

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

Answer 6

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

道具定义类似于 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 内

Answer 7

我被引导到这里主要是因为我只是想仔细检查语法，因为我有点脑残，这仍然是 Google 上的最佳结果。我的特定场景与 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 的值。

.NET Core Blazor：如果已选中Checkbox值，如何获取？

7 个答案: