Lisa
Lisa

Reputation: 293

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

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..

Upvotes: 1

Views: 1156

Answers (2)

LightningBits
LightningBits

Reputation: 38

<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;
}

I tested and it works for me, This piece of code is written in Razor syntax with C# representing a checkbox and a date picker. The checkbox is bound to a boolean value named "checkboxValue" using the "@bind" directive, which enables two-way binding between the checkbox and the value in the code behind.

The div with the class "form-group" displays a date picker only when the checkbox is checked, The date picker is bound to a "startDate" value using the "@bind" directive.

The code block at the bottom is the code behind the Razor component. It declares two private fields: "checkboxValue" and "startDate" which are used in the Razor component to manage the checkbox and date picker values.

Upvotes: 2

Mugentoki
Mugentoki

Reputation: 1616

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>

Upvotes: 0

Related Questions