I'm creating a form for my website. I have a series of yes no questions with radio buttons. When the user clicks yes, I would like a text box to appear. Here is the code I'm using


/* CSS */

form input[name="text1"]
{
display: none;
}

/* SCRIPT */

<script type="text/javascript">
function checkIt(el) {
if (el.value == "other") {
document.forms['form1'].elements['text1'].style.display = "block";
}
else {
document.forms['form1'].elements['text1'].style.display = "none";
document.forms['form1'].elements['text1'].value = '';
}
}
</script>

/* MARKUP */

<form name="form1">
<input type="radio" name="radio" value="one" onclick="checkIt(this);">One
<input type="radio" name="radio" value="two" onclick="checkIt(this);">Two
<input type="radio" name="radio" value="other" onclick="checkIt(this);">Other<br>
<input type="text" name="text1" />
</form>




The issue being, it's not hiding the textbox when no is checked. Keep in mind this is a very small version of the code I'm using. If I have just one yes or no question it seems to work fine, it's when I add it to the other questions that I have problems.


Will I have to create different instance for each question to get this to work properly??