使用 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