javascript - 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 group of the radio button should select the product model (two options) and the second set of radio buttons (two options).

Here are the radio buttons:

  & lt; Img src = "rack-bk.jpg" name = "formula" id = "formula" & gt; & Lt; Br> & Lt; Input type = "radio" name = "model" value = "rack" id = "rack_option" & gt; Rack & lt; Input type = "radio" name = "model" value = "norack" id = "norack_option" & gt; ; Norak & lt; Br> & Lt; Br> & Lt; Input type = "radio" name = "color" value = "black" id = "black_option" & gt; Black & lt; Input type = "radio" name = "color" value = "gray" id = "gray_pash" & gt; Gray  

This is doing the same thing, but only to choose the model, but I also need to add color to

This is what I tried to do but does not work:

  & lt; Script type = 'text / javascript' & gt; Click (function () {$ ("Input: radio [name = model]"). Click (function () $ ("Input: radio [name = color]"). Var value = $ (this) .val (); Var image_name; if (value == 'rack') {if (value == 'gray') {image_name = "rack-gy.jpg";} image_name = "rack -bk.jpg";}} and {If (value == 'Norak') {if (value == 'gray' {image_name = "un-rack-gy.jpg";} image_name = "non-rack-bk .jpg";}} $ (' # Formula '). Attr (' src ', image_name);});});  

In this situation, it appears that a combination of using the switch statement The 'check' selector will be of good use.

I will put event handlers on both radio groups ... In this case input: radio [name = model] and input: radio [name = colo r] ( Is clearly defined, if you have any other radio button on the page).

Then, get the currently selected value for each group inside the handler, and your behavior inside the switch statement (Better if you only object Sector values ​​appropriate to examine if you are viewing / or style) This means that if you add more options, such as blue, yellow, etc., excluding those cases and would be easier to handle them.

TL; DR: How you can do it:

  $ ("Input: radio [name = model], input: radio [name = color]"). Click (function () {// When a radio button is clicked, this handler runs. ModelValue = $ ("Input: radio [name = model]: checked"). Val (); // Find which model radio button is checked. Var colorValue = $ ("Input: radio [name = color]: checked") .val (); // Find out which color radio button is checked Var image_name = ""; // Start to clear the name of the image.We will be attached when we go. Q) {Case 'rack': image_name + = "rack"; // rack was selected, so use that value for the first part of the image. Brake; case 'noorac': image_name + "non-rack "; // No rack was selected, so use that value for the first part of the image; brake; default: image_nam e + =" rack "; // Make sure there is a default value, or a broken The image can be broken! Switch (colorview) {case 'black': image_name + = "-BK.jpg"; // Black was chosen, so the image's interior Use the value for the part. Rupture; case 'gray': image_name + = "-GY.jpg"; // was chosen gray, 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! break; } $ ('# Formula'). Attr ('src', image_name); // Keep the value of the image in formula image field src});