How to show input box after checkbox is clicked [HTML]

Question

I have this code inside my body - I'd like to show the input box only when the checkbox is checked, and then disappear again once unchecked.

<input type="checkbox" name="exercheckbox">THISCHECKBOX



<!-- show this input box --> <input type="text" name="reps">

I've seen ways to do it using javascript however I have no experience in this language so I'm not sure how to implement and adapt that code so that it works with my checkbox. Is there a way to do it using HTML? If not how would I do it using javascript?

Answer 1

You can also do with a pure CSS Solution like this.

<input type="checkbox" name="exercheckbox" id="exercheckbox">THISCHECKBOX</input>

<input type="text" name="reps" id="reps" />

CSS:

#reps{
    display: none;
}
 #exercheckbox:checked ~ #reps{
    display: block;
}

How to show input box after checkbox is clicked [HTML]

Sign up