make text box appear when radio is checked

[anwaraa]

Hi everyone. I need some javascript help.

I have a form with 3 radios. As I click a radio, a text box must appear below it. Only one text box must appear at a time depending on the radio selected.

Any help will be greatly appreaciated.

Regards
Anwar

[muazzez]

  
<script type="text/javascript">

function show() {

for(var i=1; i< 4; i++ ) {
(document.getElementById('radio'+i).checked) ? document.getElementById('text'+i).style.display="block" : document.getElementById('text'+i).style.display="none"

}
}
</script>

<style type="text/css">
.anwaraa {display:none; }
</style>


</script>

<form>
<input type="radio" id="radio1" name="radio1" onclick="show()"><br>
<input type="text" id="text1" class="anwaraa" value="111" class><br>

<input type="radio" id="radio2" name="radio1" onclick="show()"><br>
<input type="text" id="text2" class="anwaraa" value="222" ><br>

<input type="radio" id="radio3" name="radio1" onclick="show()"><br>

<input type="text" id="text3" class="anwaraa" value="333" ><br>

</form>

with while loop:

 
<script type="text/javascript">

function show() {
var i = 0;
var el;
while(el = document.getElementsByName("radio1")[i++] ) {
// alert(i);
(document.getElementById('radio'+i).checked) ? document.getElementById('text'+i).style.display="block" : document.getElementById('text'+i).style.display="none"

}
}
</script>

<style type="text/css">
.anwaraa {display:none; }
</style>


</script>

<form>
<input type="radio" id="radio1" name="radio1" onclick="show()"><br>
<input type="text" id="text1" class="anwaraa" value="111" class><br>

<input type="radio" id="radio2" name="radio1" onclick="show()"><br>
<input type="text" id="text2" class="anwaraa" value="222" ><br>

<input type="radio" id="radio3" name="radio1" onclick="show()"><br>

<input type="text" id="text3" class="anwaraa" value="333" ><br>

</form>

[anwaraa]

Thank you very much muazzez. It works perfectly.

Regards
Anwaraa