how to hide and show radio button based on radio button selection ?
**** THIS IS MY SCRIPT****
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type ="text/javascript">
$(document).ready(function()
{
$('vehicle_0').click(function()
{
$('radio1_1').show('fast');
$('radio1_2').show('fast');
$('radio1_3').show('fast');
$('radio1_0').hide('fast');
});
$('vehicle_1').click(function()
{
$('radio1_1').hide('fast');
$('radio1_2').hide('fast');
$('radio1_3').hide('fast');
$('radio1_0').show('fast');
});
});
</script>
******THIS IS MY RADIO BUTTON *********
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>DO YOU USED ANY VEHICLE ?</legend>
<input type="radio" name="vehicle" id="vehicle_0" value="1" required="required"/>
<label for="vehicle_0">Yes</label>
<input type="radio" name="vehicle" id="vehicle_1" value="0" />
<label for="vehicle_1">No</label>
</fieldset>
</div>
<!-- for Yes -->
<div data-role="fieldcontain" class="vehicle_1">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>CHOOSE VEHICLE / WALKING DISTANCE : </legend>
<input type="radio" name="vehicle2" id="radio1_1" value="1" required="required"/>
<label for="radio1_1">Car</label>
<input type="radio" name="vehicle2" id="radio1_2" value="2" />
<label for="radio1_2">Motor</label>
<input type="radio" name="vehicle2" id="radio1_3" value="3" />
<label for="radio1_3">Public Transport</label>
</fieldset>
</div>
<!-- for NO -->
<div data-role="fieldcontain" class="vehicle_0">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>CHOOSE VEHICLE / WALKING DISTANCE : </legend>
<input type="radio" name="vehicle2" id="radio1_0" value="0" required="required"/>
<label for="radio1_0">Own transpotation</label>
</fieldset>
</div>