Question

I have two inputs which correspond with each other on the SAME PAGE and in the SAME FORM.

The input’s are:

Select Event:
<input type="radio" name="type" value="Birthday" id="Birthday" CHECKED /> <label for="Birthday">Birthday</label><br />
<input type="radio" name="type" value="Anniversary" id="Anniversary" /> <label for="Anniversary">Anniversary</label><br />
<input type="radio" name="type" value="Holiday" id="Holiday" /> <label for="Holiday">Holiday</label><br />

Now I need to have the input selected above to correspond to the VALUE as well as IMG SRC of the input below…

For example, let’s say, if the Birthday radio above was selected then radio below to be:

<input type="radio" name="design" value="Birthday_design_1" id="1" CHECKED /> <label for="1"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>
<input type="radio" name="design" value="Birthday_design_2" id="2" /> <label for="1"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>

OR IF Anniversary radio above is filled above then radio below would be:

<input type="radio" name="design" value="Anniversary_design_1" id="1" CHECKED /> <label for="1"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>
<input type="radio" name="design" value="Anniversary_design_2" id="2" /> <label for="1"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>

OR IF Holiday radio above is filled above then radio below would be:

<input type="radio" name="design" value="Holiday_design_1" id="1" CHECKED /> <label for="1"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>
<input type="radio" name="design" value="Holiday_design_2" id="2" /> <label for="1"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>

As you may be able to see out, the VALUE of the input changes as well does the IMG SRC of the radio.

Please help, I believe jQUERY will be needed for this.

Thanks,
Chad.

Answer 1

<input group_class="group-1" class="event_radio" type="radio" name="type" value="Birthday" id="Birthday" CHECKED /> <label for="Birthday">Birthday</label><br />
<input group_class="group-2" class="event_radio" type="radio" name="type" value="Anniversary" id="Anniversary" /> <label for="Anniversary">Anniversary</label><br />
<input group_class="group-3" class="event_radio" type="radio" name="type" value="Holiday" id="Holiday" /> <label for="Holiday">Holiday</label><br />

<input class="group-1" type="radio" name="design" value="Birthday_design_1" id="1" CHECKED /> <label class="group-1" for="1"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>
<input class="group-1" type="radio" name="design" value="Birthday_design_2" id="2" /> <label class="group-1" for="2"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>

<input class="group-2" type="radio" name="design" value="Anniversary_design_1" id="3" CHECKED /> <label class="group-2" for="3"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>
<input class="group-2" type="radio" name="design" value="Anniversary_design_2" id="4" /> <label class="group-2" for="4"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>

<input class="group-3" type="radio" name="design" value="Holiday_design_1" id="5" CHECKED /> <label class="group-3" for="5"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>
<input class="group-3" type="radio" name="design" value="Holiday_design_2" id="6" /> <label class="group-3" for="6"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>

css:

.group-1, .group-2, .group-3 { display: none; }

and javascript:

$(document).ready(function () {
    $('.event_radio').click(function () {
        $radio = $(this);

        $('.group-1, .group-2, .group3').fadeOut('fast');

        $('.'+$radio.attr('group_class')).fadeIn('fast');
    });
});