How do I hide/show things according to checkbox status?-CodePudding

I'm making a blazor - server-side APP and am using c# and HTML (not mudblazor). I want for there to be a growing form in this questionnaire. When this checkbox is checked I want the date picker to appear. I currently have:

   <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="footballcheck">When did you go?</label>
        <input type="date" id="matchdate" name="matchdate">


@code {
  private void CheckChanged()
    {
        var checkbox = footballcheck;
        if (checkbox.checked == true)  // If the checkbox is checked, display the date picker
        {
          matchdate.show;
        }
        else
        {
          matchdate.hide;
        }
    }
}

How do I refer to the components? Do I do it by ID? I've seen people use document.GetByName but this doesnt work for me.

e.g.

private void CheckChanged()
    {
        var checkbox = document.getElementById('footballcheck');
      
        if (checkbox.checked == true)  // If the checkbox is checked, display the date picker
        {
           matchdate.show;
        }
        else
        {
           matchdate.hide;
        }
    }

I'm not sure where to go from here..

CodePudding user response：

Not sure if it's an option for you, but this could be done entirely in CSS with the :checked selector in combination with the general sibling combinator (~)

First, you hide your datepicker, for example with the display property:

#matchdate {
    display: none;
}

Then, you apply display: block only when the checkbox is checked:

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

Why do we use ~, the general sibling combinator here?
Simply because there's another label in between the checkbox and datepicker and we can't select it with any other combinators.

What's about the label, how do we hide it? Either apply the same styles for both, the label and input, or wrap them into another container and select is using the adjacent sibling combinator ( )

Also a small working example, note that I've change the for attribute for the second label to for="matchdate" since it is for the datepicker and not the checkbox:

/* 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>

CodePudding user response：

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

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

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