使用 Blazor 的“全选”复选框

Question

如何使用 Blazor 为复选框集合实现“全选”复选框？有很多使用 JavaScript/jQuery 的示例，但我尝试使用 C# 来代替。

这就是我现在正在使用的东西。此代码可以将所选月份添加到列表中，但是当使用“全选”复选框时，其他框未选中。

注意：@Months[0].MonthName = Select All

<ul class="checkbox-grid">
  <li>
    <input type="checkbox"
      @onchange="EventArgs => { CheckAllMonths(Months[0], EventArgs.Value); }" />
    <label for="@Months[0].MonthId" id="checkboxLabel">@Months[0].MonthName</label>
  </li>
</ul>
@{
  for (int i = 1; i < Months.Count(); i++)
  {
    int j = i;
    <ul class="checkbox-grid">
      <li>
        <input type="checkbox" name="@Months[j].IsMonthChecked"
          @onchange="EventArgs => { CheckManualMonth(Months[j], EventArgs.Value); }" />
        <label for="@Months[j].MonthId" id="checkboxLabel">@Months[j].MonthName</label>
      </li>
    </ul>
  }
}

@code {
  List<Month> MonthList = new List<Month>();

  void CheckAllMonths(Month month, object checkValue)
  {
    if((bool)checkValue)
    {
      foreach(var item in Months)
      {
        CheckManualMonth(item, checkValue);
      }
    }
    else
    {
      foreach(var item in Months)
      {
        CheckManualMonth(item, checkValue);
      }
    }
  }

  void CheckManualMonth(Month month, object checkedValue)
  {
    if((bool)checkedValue)
    {
      if(!MonthList.Contains(month))
      {
        MonthList.Add(month);
        month.IsMonthChecked = true;
      }
    }
    else
    {
      if(MonthList.Contains(month))
      {
        MonthList.Remove(month);
        month.IsMonthChecked = false;
      }
    }
  }
}

初始化月份

  private void GetMonthChecklist()
  {
    List<Month> months = new List<Month>()
    {
      new Month{MonthId = 0, MonthName = "All Months", IsMonthChecked = false},
      new Month{MonthId = 1, MonthName = "Jan", IsMonthChecked = false},
      new Month{MonthId = 2, MonthName = "Feb", IsMonthChecked = false},
      new Month{MonthId = 3, MonthName = "Mar", IsMonthChecked = false},
      new Month{MonthId = 4, MonthName = "Apr", IsMonthChecked = false},
      new Month{MonthId = 5, MonthName = "May", IsMonthChecked = false},
      new Month{MonthId = 6, MonthName = "Jun", IsMonthChecked = false},
      new Month{MonthId = 7, MonthName = "Jul", IsMonthChecked = false},
      new Month{MonthId = 8, MonthName = "Aug", IsMonthChecked = false},
      new Month{MonthId = 9, MonthName = "Sep", IsMonthChecked = false},
      new Month{MonthId = 10, MonthName = "Oct", IsMonthChecked = false},
      new Month{MonthId = 11, MonthName = "Nov", IsMonthChecked = false},
      new Month{MonthId = 12, MonthName = "Dec", IsMonthChecked = false}
    };

    Months = months.ToList();
  }

Answer 1

您没有将值绑定到您的复选框。实际上，绑定输入的选中属性最简单的方法是使用InputCheckbox：

    @foreach(var month in Months)
    {
        <ul class="checkbox-grid">
            <li>
                <InputCheckbox ValueExpression="() => month.IsMonthChecked" Value="month.IsMonthChecked" ValueChanged="() => CheckManualMonth(month)" />
                <label for="@month.MonthId" id="checkboxLabel">@month.MonthName</label>
            </li>
        </ul>
    }

Answer 2

我想通了。首先，我坚持我在 InitializeData 类中创建的原始列表。我使用@bind-Value 进行双向绑定，使用@onclick 调用方法。如果取消选择另一个月份，CheckManualMonth 方法也会取消选择“全选”复选框。

<fieldset class="group">
    <legend>Month</legend>
    <ul class="checkbox-grid">
        <li>
            <InputCheckbox
                @bind-Value="Months[0].IsMonthChecked"
                @onclick="() => CheckAllMonths(Months[0])"/>
            <label for="@Months[0].MonthId" id="checkboxLabel">
                @Months[0].MonthName
            </label>
        </li>
    </ul>

    @{
        for(var i = 1; i < Months.Count(); i++)
        {
            var j = i;
            <ul class="checkbox-grid">
                <li>
                    <InputCheckbox
                        @bind-Value="Months[j].IsMonthChecked"
                        @onclick="() => CheckManualMonth(Months[j])"/>
                    <label for="@Months[j].MonthId" id="checkboxLabel">
                        @Months[j].MonthName
                    </label>
                </li>
            </ul>
        }
    }
</fieldset>

void CheckAllMonths(Month month)
{
    if(month.IsMonthChecked == false)
    {
        foreach(var item in Months)
        {
            item.IsMonthChecked = true;
        }
    }
    else
    {
        foreach(var item in Months)
        {
            item.IsMonthChecked = false;
        }
    }
}

void CheckManualMonth(Month month)
{
    if(month.IsMonthChecked == false)
    {
        month.IsMonthChecked = true;
    }
    else
    {
        month.IsMonthChecked = false;
        Months[0].IsMonthChecked = false;
    }
}

Answer 3

我相信它应该相当简单。我如何在我的项目中实现它是这样的：

标题复选框

<input type="checkbox" id="SelectAllHeader"
    @onchange="EventArgs => { CheckAllExpense(_allSelected, EventArgs.Value); }" /></th>

正文复选框

@foreach (var extExpense in _extendedExpenses)
{
    _iCount++;
    <tr class="text-sm @*row spinner-grow-sm*@">
        <td class="text-left">@_iCount</td>
        <th scope="row" @key="extExpense">
            <input type="checkbox" id="@extExpense.expense.Id" @bind="@extExpense.IsChecked" />
        </th>
    </tr>
}

在代码中：

void CheckAllExpense(bool headerChecked, object checkValue)
{
    bool isChecked = (bool)checkValue;
    _extendedExpenses.ToList().ForEach(e => e.IsChecked = isChecked);
}

完整代码参考GitHub上：https://github.com/DeepakkSHAW/ExpenseTracker.Server