I have a pair of checkboxes labeled First and Second
<input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1" /> First
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox2" /> Second
Additionally, I have a form with three input fields: name, phone, and address.
<form id="f1">
<div class="form-row">
<div class="form-group col-md-6">
<label for="first">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group col-md-6">
<label for="">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" required>
</div>
<div class="form-group col-md-6">
<label for="inputCity">Address</label>
<input type="text" class="form-control" id="address" name="address" required>
</div>
</div>
</form>
If the user selects the First checkbox, only the name and phone input fields should be displayed. Similarly, selecting the Second checkbox should display the address field.
Here is what I have attempted:
https://jsfiddle.net/thorstorm1102/16hgpt0z/3/
I tried hiding the entire form using JavaScript:
var form1 = document.querySelector("#f1"),
form2 = document.querySelector("#f2"),
check1 = document.querySelector("#checkbox1"),
check2 = document.querySelector("#checkbox2");
check1.onchange = function() {
form1.classList.toggle("hidden");
}
And here is the associated CSS:
.hidden {
display: none;
}
Any suggestions on how to show only specific content based on the checkbox selection?