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

使用Blazor的“全选”复选框

3 个答案:

标题复选框

身体复选框