Display an Image based on multiple radio button selections

I just began working on a project that I believe I can code most of without a problem. What is stumping me is how to get two groups of radio buttons to collaborate using javascript/jQuery to display a single image.

I have two groups of radio buttons. The first group the user will select a number option. The second group is kind of a multiplier. The logic should then see which button is selected in group 1 (about 20 options) and then see which option in group 2 (about 5 options) is checked, then display a specific image.

Any thoughts?

Edit/Update:

I wanted to make sure that I got back with what I have, sorry I didn't put anything up before I've just been hurrying today. This is a project I need to complete by January 5th but I know that I need to get a hop on it next week...this week I'm having a baby (well my wife is having it). Trying to get outstanding stuff cleared away.

This is what I had and was trying to do...

    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


<script type="text/javascript">
$(function(){     
  $('.Group1').click(function(){
    if ($(this).attr("id") == "A" && $(this).attr("id") == "A" )
    {
      $('#DISPLAY').show();
    } 
    });
});

$(function(){     
  $('.Group2').click(function(){
    if ($(this).attr("id") == "1" && $(this).attr("id") == "1" )
    {
      $('#DISPLAY').show();
    } 
    });
});
</script>


<form name="form1" id="form1">
    <ul>
        <li><input type="radio" name="Group1" id="A" value="A" class="Group1" />A</li>
        <li><input type="radio" name="Group1" id="B" value="B" class="Group1" />B</li>
        <li><input type="radio" name="Group1" id="C" value="C" class="Group1" />C</li>
        <li><input type="radio" name="Group1" id="D" value="D" class="Group1" />D</li>
        <li><input type="radio" name="Group1" id="E" value="E" class="Group1" />E</li>
        <li><input type="radio" name="Group1" id="F" value="F" class="Group1" />F</li>
        <li><input type="radio" name="Group1" id="G" value="G" class="Group1" />G</li>
        <li><input type="radio" name="Group1" id="H" value="H" class="Group1" />H</li>
    </ul>

    <ul>
        <li><input type="radio" name="Group2" id="1" value="1" class="Group2" checked="checked" />1</li>
        <li><input type="radio" name="Group2" id="2" value="2" class="Group2" />2</li>
        <li><input type="radio" name="Group2" id="3" value="3" class="Group2" />2</li>
        <li><input type="radio" name="Group2" id="4" value="4" class="Group2" />2</li>
        <li><input type="radio" name="Group2" id="5" value="5" class="Group2" />2</li>
    </ul>
</form>


<div id="DISPLAY">
    <IMG src="images/barendstart.png" />
</div>

The problem I'm running into is that I don't know how to easily reference the second group to make the compound if statement above work in the Group1.click function. Right now its just validating the same radio button twice. Same is true for the Group2.click function.

You know I'm approaching this completely wrong and shouldn't try to do this crap at the end of the day on a Friday right before heading to the OB ward...

Solution

It really depends on the type of image you want to display and the impact the different options will have on them. I'd recommend one of these two options:

If the choices you make will greatly impact the appearance of the image, then you could simply create an image for every possible outcome, and save them using a naming convention that would represent which options need to be chosen to obtain it (eg.: 1-woodfinish.jpg, 2-woodfinish.jpg)
If the images are almost the same, or if only a part of the image changes when you change your options, you could use a base background image and overlay multiple images over it (one for each option) containing the changing parts. This would require you to make less images, but only works in certain situations.

Both these options are not super effective, but they'll definitely get you up and running quickly. As for the code to implement the solution:

$('input[name=radio-group1], input[name=radio-group2]').change(function(){
    $('#image').prop('src', $('input[name=radio-group1]:checked').val() + '-' + $('input[name=radio-group2]:checked').val() + '.jpg');
}

This will change the image source's filename according to the selected options.

Hope this helps!