Question

Problem:
I would like to kindly ask for assistance how you can include input fields and radio buttons depending on a previous choice you make for radio buttons.

jQuery code:

<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
    {
        $("input[name='authors']").change(function()
        {
            if(this.checked) 
            {
                if(this.value == 1) 
                {
                    $("#choice-1").show();
                    $("#choice-2").hide();
                }
                else if (this.value == 2)
                {
                    $("#choice-2").show();
                    $("#choice-1").hide();
                }
            }
        }
    });
</script>

HTML code:

<label class="radio"><input type="radio" name="authors" id="authors" value="1">1 author</label> 
<label class="radio"><input type="radio" name="authors" id="authors" value="2">2 authors</label>

<div id="choice-1" style="display: none;">

    <label class="control-label">Gender:</label>

    <label class="radio"><input type="radio" name="FirstGender" id="FirstGender" value="1">Man</label>
    <label class="radio"><input type="radio" name="FirstGender" id="FirstGender" value="2">Woman</label>

</div>

<div id="choice-2" style="display: none;">

    <label class="control-label">Gender:</label>
    <label class="radio"><input type="radio" name="FirstGender" id="FirstGender" value="1">Man</label> 
    <label class="radio"><input type="radio" name="FirstGender" id="FirstGender" value="2">Woman</label>

    <label class="control-label">Gender:</label>
    <label class="radio"><input type="radio" name="SecondGender" id="SecondGender" value="1">Man</label> 
    <label class="radio"><input type="radio" name="SecondGender" id="SecondGender" value="2">Woman</label>

</div>

Desired function:
If I click on the radio button 1 Author, then 1 input textfield should be generated with a headline called “Author name” and 2 radio buttons (Man / Woman) with the headline “Gender”. Similar approach goes to 2 author (see comments in the code).

Thanks in advance!

Answer 1

$("input[name='authors']").change(function() {

    $('div[id^=choice]').hide();
    $('div#choice-' + this.value).show();

});

DEMO