Как скрыть/показать вещи в соответствии со статусом флажка?

Не уверен, что это вариант для вас, но это можно сделать полностью в CSS с помощью селектора :checked в сочетании с общим родственным комбинатором (~)

Во-первых, вы скрываете средство выбора даты, например, с помощью свойства display:

#matchdate {
    display: none;
}

Затем вы применяете display: block только тогда, когда установлен флажок:

#footballcheck:checked ~ #matchdate {
    display: block;
}

Почему мы используем ~, общий комбинатор братьев и сестер здесь?
Просто потому, что между флажком и средством выбора даты есть еще одна метка, и мы не можем выбрать ее никакими другими комбинаторами.

Что насчет ярлыка, как его спрятать? Либо примените одни и те же стили для метки и ввода, либо поместите их в другой контейнер и выберите, используя смежный комбинатор (+)

Также небольшой рабочий пример, обратите внимание, что я изменил атрибут for для второй метки на for = "matchdate", поскольку он предназначен для средства выбора даты, а не для флажка:

/* basic styling, you can ignore it */
form {
  display: flex;
  flex-direction: column;
}

/* hide the datepicker */
label[for = "matchdate"],
#matchdate {
  display: none;
}

/* show datepicker when checkbox checked */
#footballcheck:checked + label[for = "matchdate"], /* remove this line if the label should not be hidden */
#footballcheck:checked ~ #matchdate {
  display: block;
}

<form>
  <label for = "footballcheck">Have you been to a football match in the last year?</label>
  <input type = "checkbox" id = "footballcheck" name = "footballcheck" onclick = "CheckChanged()">

  <label for = "matchdate">When did you go?</label>
  <input type = "date" id = "matchdate" name = "matchdate">
</form>

<input type = "checkbox" @bind = "checkboxValue" /> Show date picker

<div class = "form-group" style = "display:@(checkboxValue ? "block" : "none")">
    <label for = "startDate">Start date:</label>
    <input type = "date" @bind = "startDate" />
</div>

@code {
    private bool checkboxValue;
    private DateTime startDate;
}

Я протестировал, и у меня это работает. Этот фрагмент кода написан с синтаксисом Razor, где C# представляет собой флажок и средство выбора даты. Флажок привязывается к логическому значению с именем «checkboxValue» с помощью директивы «@bind», которая обеспечивает двустороннюю привязку между флажком и значением в коде позади.

Div с классом «form-group» отображает средство выбора даты, только когда установлен флажок. Средство выбора даты привязано к значению «startDate» с помощью директивы «@bind».

Блок кода внизу — это код компонента Razor. Он объявляет два закрытых поля: «checkboxValue» и «startDate», которые используются в компоненте Razor для управления значениями флажка и средства выбора даты.