I am currently working on creating a form that includes both checkboxes and text entry fields. The goal is to have related text appear next to each checkbox when it is checked. However, my current code does not seem to be functioning as expected: HTML:
<input type="checkbox" class="box1" onchange="showHide()"> Option 1
<div class="hid box1">
<select name="option1">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
Comments: <input type="text" name="option1Comment">
</div>
CSS:
.hid {
display: none;
}
JavaScript:
function showHide() {
var checkBox = document.getElementByClassName(this);
var text = document.getElementByClassName(this "hid");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}