如何绑定复选框值并在更改时调用方法？

Question

我通过调用 api 来填写待办事项列表，因此可以选中一些复选框：

我想在有人点击我的复选框时调用一个方法。如何同时使用 bind 和 onchange？

@foreach (var todo in todos)
{
    <li style="margin: 20px;">
        <input type="hidden" @bind="todo.Id" />
        <input type="checkbox" @bind="todo.IsComplete" @onchange="eventArgs => { CheckboxClicked(todo, eventArgs.Value); }" />
        <input @bind="todo.Name" />
    </li>
}

Answer 1

@foreach (var todo in todos)
{
    <li style="margin: 20px;">
        <input type="hidden" @bind="todo.ID" />
       @* <input type="checkbox" checked="@todo.IsComplete" @onchange="eventArgs => 
         { CheckboxClicked(todo, eventArgs.Value); }" /> *@

         <input type="checkbox" checked="@todo.IsComplete" @onchange="@((args) => 
         { todo.IsComplete = (bool) args.Value; } )" />

        <input @bind="todo.Name" />
    </li>
}

@code{

   private List<ToDo> todos = new List<ToDo>{new Todo{ID = 1, IsComplete = false, Caption = "I have a bike", Name = "Name1"},
new Todo{ID = 1, IsComplete = false, Caption = "I have a car", Name = "Name2"},
new Todo{ID = 1, IsComplete = false, Caption = "I have a boat", Name = "Name3"}};

 //   private async Task CheckboxClicked(ToDo todo, ChangeEventArgs e)
  //  {

  //  }
    

    public class ToDo
    {
        public int ID { get; set; }
        public bool IsComplete{ get; set; }
        public string Caption { get; set; }
        public string Name { get; set; }
       
    }

}

如何绑定复选框值并在更改时调用方法？

How can I bind checkbox value and invoke a method on change?

blazor

blazor-server-side

blazor-client-side