.NET Core Blazor：如果选中，如何获取复选框值？

Posted 2023-03-05

【中文标题】.NET Core Blazor：如果选中，如何获取复选框值？

【英文标题】：.NET Core Blazor: How to get the Checkbox value if it is checked?

【发布时间】：2018-12-16 11:52:23

【问题描述】：

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

这是我的代码：

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

【参考方案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;
    

【讨论】：

这对我不起作用，直到我也使用了 checked 属性——请注意，checked 仍然可以绑定到一个函数，例如checked="@(HasClubMember(clubID))"

我的猜测是 c.Add("Clube01"); 是一个错字（俱乐部，不是俱乐部），c.Add("Clube02"); 是传播错字的旧版复制和粘贴 :)

@MichaelTranchida 这不是错字:) 它只是用另一种语言（葡萄牙语）写的“俱乐部”这个词。

【参考方案2】：

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

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

在您的 html 中：

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

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

【讨论】：

它无法编译，因为“检查的属性设置了两次”错误。仅供参考

checked 参数似乎是默认设置的。因此，在这种情况下，您只需删除 checked 属性即可。对于未选中的复选框，请使用：<input type="checkbox" @bind="checkedValue" unchecked>

【参考方案3】：

我不认为其他任何答案都符合我的要求：

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

【讨论】：

我不知道为什么人们让事情变得如此困难......我更喜欢简单的布尔表达式 ("@((myitem.checked) ? "checked" : "") AND @onchange=" eventArgs => ApprovedToggle((bool)eventArgs.Value, item.Isapproved); " 在按钮事件中做一些工作也不好。按钮会等到

@TimDavis 很好的建议，除了你的“检查”在 Blazor 中对我不起作用。我确实检查了=“@myItem.checked”并且它有效。任何评估为 false 的 Razor 表达式根本不会呈现“已检查”属性，因此浏览器不会混淆。

【参考方案4】：

去掉value属性：

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

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

public bool name get;set;

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

希望这会有所帮助...

【参考方案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;
   

【讨论】：

哦，我明白了。但是有什么方法可以让我获得它的价值吗？因为当我删除价值部分时，没有价值得到

你绑定到@name，所以它会保存值

它会保持这个值，直到我设置一些东西。我的意思是如何从那里获取静态值？

不确定你的意思。但是我提供了一个示例，涵盖了我能想到的所有内容。希望对您有所帮助。

【参考方案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 中

【参考方案7】：

你可以试试这个：

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

【讨论】：

checked="@(YourConditionTypeOfBool?"checked":null)" .... 这很棒。谢谢好友。

【参考方案8】：

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

我的解决方案使用 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 的值。