Display image depending on two input radio buttons

问题

I am trying to display an image based on the selection of 4 different radio buttons with 2 different names.

For example the first set of radio buttons should select the product model (two options) and the second set of radio buttons the color (two options).

Here are the radio buttons:

 <img src="Rack-BK.jpg" name="formula" id="formula">

<br>
<input type="radio" name="model" value="Rack" id="rack_option">Rack 
<input type="radio" name="model" value="NoRack" id="norack_option" >NoRack
<br><br>
<input type="radio" name="color" value="Black" id="black_option" > Black
<input type="radio" name="color" value="Gray" id="gray_option" > Gray

This is what is working but only to select the model but I need the color to be added also.

<script type='text/javascript'>
$(document).ready(function(){
    $("input:radio[name=model]").click(function() {
        var value = $(this).val();
        var image_name;
        if(value == 'Rack'){
            image_name = "Rack-BK.jpg";
        }else{
            if(value == 'NoRack'){
                image_name = "Without-Rack-BK.jpg";

            }
        }
         $('#formula').attr('src', image_name);
    });
});

This is what I tried doing but doesn't work:

    <script type='text/javascript'>
        $(document).ready(function(){
        $("input:radio[name=model]").click(function() 
    $("input:radio[name=color]").click(function() 


{
            var value = $(this).val();
        var image_name;


        if(value == 'Rack')

    { 
        if (value == 'Gray')
        {
            image_name = "Rack-GY.jpg";
        }


            image_name = "Rack-BK.jpg";
    }


        }else{

            if(value == 'NoRack')
    {
        if (value =='Gray'
        {
                    image_name = "Without-Rack-GY.jpg";
        }

    image_name = "Without-Rack-BK.jpg";

            }
 }
                $('#formula').attr('src', image_name);
    });
});

回答1:

In this case, it appears that a combination of using a switch statement and the 'checked' selector would be of good use.

I would put the event handler on both the radio groups...in this case the input:radio[name=model] and input:radio[name=color] (explicitly defined in case you have any other radio buttons on the page).

Then, inside of the handler get the currently selected value for each group, and do your handling inside of switch statements (better suited for handling a lot of if/else style of checking when you're just looking at the value of the item). This means if you add more options, such as blue, yellow, etc, it will be easier to drop in and handle those cases.

TL;DR: Here's how you could do it:

$("input:radio[name=model], input:radio[name=color]").click(function() { // This handler runs when any of the radio buttons are clicked.
    var modelValue = $("input:radio[name=model]:checked").val(); // Find which model radio button is checked.
    var colorValue = $("input:radio[name=color]:checked").val(); // Find which color radio button is checked.

    var image_name = ""; // Initialize the image name to blank. We will be appending as we go.

    switch (modelValue) {
        case 'Rack':
            image_name += "Rack"; // Rack was selected, so use that value for the first part of the image.
            break;
        case 'NoRack':
            image_name += "Without-Rack"; // No Rack was selected, so use that value for the first part of the image.
            break;
        default:
            image_name += "Rack"; // Make sure there is a default value, or a broken image could occur!
            break;
    }

    switch (colorValue) {
        case 'Black':
            image_name += "-BK.jpg"; // Black was selected, so use that value for the last part of the image.
            break;
        case 'Gray':
            image_name += "-GY.jpg"; // Gray was selected, so use that value for the last part of the image.
            break;
        default:
            image_name += "-BK.jpg"; // Make sure there is a default value, or a broken image could occur!
            break;
    }

    $('#formula').attr('src', image_name); // Put the image value in the formula image field src.
});

来源：https://stackoverflow.com/questions/21841042/display-image-depending-on-two-input-radio-buttons