是否可以根據其他復選框 state 選中/取消選中復選框？

Question

我正在嘗試創建一個簡單的午餐計划 webapp，您可以在其中注冊一周中的任何工作日。 我希望用戶能夠每天單獨使用 select 或整周使用 select。

我認為簡單的方法調用/檢查在 Blazor razorpage 中似乎是不可能的。 我想要一個整周的復選框，它檢查或取消選中每一天的所有復選框。 這非常簡單，並且可以按預期工作。 但是，如果我取消選中任何一天，我也希望取消選中星期復選框。

這是我頁面的相關部分的樣子：

@foreach (var item in weeks)
{
    <tr>
        <td><input type="checkbox" @onchange="eventArgs => SetAllWeekDays(item.Key, eventArgs.Value)" /> @item.Value.WeekNumber</td>
        <td>
            <input type="checkbox" @bind="item.Value.WeekDays[0].IsSignedUp" />
        </td>
        <td>
            <input type="checkbox" @bind="item.Value.WeekDays[1].IsSignedUp" />
        </td>
        <td>
            <input type="checkbox" @bind="item.Value.WeekDays[2].IsSignedUp" />
        </td>
        <td>
            <input type="checkbox" @bind="item.Value.WeekDays[3].IsSignedUp" />
        </td>
        <td>
            <input type="checkbox" @bind="item.Value.WeekDays[4].IsSignedUp" />
        </td>
    </tr>
}

這是 SetAllWeekDays 方法：

private void SetAllWeekDays(int weekNumber, object checkedValue)
{
    if ((bool)checkedValue)
    {
        for (int i = 0; i < weeks[weekNumber].WeekDays.Count; i++)
        {
            weeks[weekNumber].WeekDays[i].IsSignedUp = true;
        }
    }
    else
    {
        for (int i = 0; i < weeks[weekNumber].WeekDays.Count; i++)
        {
            weeks[weekNumber].WeekDays[i].IsSignedUp = false;
        }
    }
}

當我選中或取消選中一周時，它會選中或取消選中所有天，但如果我單獨選中或取消選中任何一天，則該周的復選框保持不變

我覺得我缺少一些將方法調用數據綁定到整周值的明顯方法，因為您不能既綁定值又設置 @onchange 事件。

Answer 1

這是一個工作代碼示例如何做到這一點......復制和測試：

請注意， @bind等效於checked屬性和@onchange指令，以及我如何使用這兩者

@page "/LunchScheme"
@using System;

<table class="table">
    <thead>
        <tr>
            <td>Week</td>
            <td>Monday</td>
            <td>Tuesday</td>
            <td>Wednesday</td>
            <td>Thursday</td>
            <td>Friday</td>
        </tr>
    </thead>
    <tbody>

@foreach(var week in weeks)
{
    <tr>
                <td>
               
    <input type="checkbox" checked="@week.Selected" @onchange="@((args) => { week.Selected = (bool)
            args.Value; Check(week);  } )" />
            </td>

    @foreach(var day in week.DayOfTheWeeks)
    {
        <td>
        <input type="checkbox" checked="@day.Selected" @onchange="@((args) => { day.Selected = (bool)
            args.Value; CheckWeek(week);  } )" />
          </td>
    }
    </tr>

}
 </tbody>
</table>


@code {

    private List<Week> weeks = new List<Week>() { new Week { ID = 1 },
new Week { ID = 2 },
new Week { ID = 3 },
new Week { ID = 4 }};
   
    public class Week
    {
        public int ID { get; set; }
        public bool Selected { get; set; }
        public List<DayOfTheWeek> DayOfTheWeeks { get; set; } = new List<DayOfTheWeek>()
                 { new DayOfTheWeek{ DayOfWeek = DayOfWeek.Monday },
                                 new DayOfTheWeek{ DayOfWeek = DayOfWeek.Tuesday },
                             new DayOfTheWeek{ DayOfWeek = DayOfWeek.Wednesday },
                             new DayOfTheWeek{ DayOfWeek = DayOfWeek.Thursday },
                                  new DayOfTheWeek{ DayOfWeek = DayOfWeek.Friday }};
    }

     public class DayOfTheWeek
    {
        public DayOfWeek DayOfWeek {get; set;}
        public bool Selected {get;set;}

    }

     protected void Check(Week week)
    {
        var toCheck = week.DayOfTheWeeks;
       
        foreach (var day in toCheck)
        {
            day.Selected = week.Selected;
        }

    }

     protected void CheckWeek(Week week)
    {
        var allSelected = week.DayOfTheWeeks.All(day => day.Selected == true);

        if(allSelected)
        {
            week.Selected = true;
        }
       
        else
        {
            week.Selected = false;
        }

    }

}