I have multiple text boxes and radio buttons , when i click on one radio button to display text box then and enter details , then i click on next radio button . my previous text box hides . There is only on text box that i can see at a time .
code :
<script>
$("input[type='radio']").click(function(){
if($(this).val() === "yes")
$('#textbox1').show();
else
$('#textbox1').hide();
});
$('input').click( function() {
$('input[name="licform"]:checked').val();
if($(this).val()=== "no1")
$("#table").show();
else
$("#table").hide();
});
</script>
<h4>1. AREA OF OPERATION</h4>
<p>Temporary Extension of Area <label>Yes</label><input type="radio" name="type" value="yes" /> <label>No</label><input type="radio" name="type" value="no" /></p>
<p> <textarea id="textbox1" hidden="true" rows="7" cols="150" placeholder="Enter details & its reason with effect from extended area reasons for extension"></textarea>
</td></tr>
<p>i. Possess Valid Storage License(Please Tick One)</p>
<table border="1" cellpadding="0" cellsapcing="0" border-style="solid" style="border-collapse: collapse" >
<tr>
<th style="text-align: center; width: 50px;">J</th>
<th style="text-align: center; width: 50px;">XIII</th>
<th style="text-align: center; width: 50px;">XV</th>
<th style="text-align: center; width: 50px;">XVII</th>
<TH style="text-align: center; width: 50px;">NO LICENSES</TH>
</tr>
<tr style="text-align: center; width: 50px;">
<td><input type="radio" name="licform" value="j"></td>
<td><input type="radio" name="licform" value="xiii"></td>
<td><input type="radio" name="licform" value="xv"></td>
<td><input type="radio" name="licform" value="xxvii"></td>
<td><input type="radio" name="licform" value="nolicense"></td></tr>
</table>