title: Switch & Case function with Radio Buttons
body: <p>I have read various questions and answers but I seem to be having a problem with my code and I am unsure why.</p>
  
  <p>Here is what I am attempting to achieve. I have 3 different radio button groups. Each time I click a different radio button I want a single picture to display that corresponds to the value of the 3 radio groups.</p>
  
  <p>I have a picture for all 8 combinations. To make it easy for me to make sure it was working correctly, the image I have is actually the name of the 3 items that are checked off by the radio buttons. Opening the page you will see Wood, Thumb turns, and Face Mounted are checked so the picture below shows the picture that has those words. If I click on aluminum the picture should change to aluminum, thumb turns, and face mounted.</p>
  
  <p>Below is what I have. Any help would be greatly appreciated.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type='text/javascript'&gt;
  $("input:radio[name=guides], input:radio[name=locking], input:radio[name=mounting]").click(function() {
      var guidesValue = $("input:radio[name=guides]:checked").val();
      var lockingValue = $("input:radio[name=locking]:checked").val();
      var mountingValue = $("input:radio[name=mounting]:checked").val();
  
  
      var image_name = "";
  
      switch (guidesValue) {
          case 'WOOD':
              image_name += "Newfolder/WOOD";
              break;
          case 'ALUMINUM':
              image_name += "Newfolder/ALUMINUM";
              break;
          default:
              image_name += "Newfolder/WOOD";
              break;
      }
  
      switch (lockingValue) {
          case 'THUMB':
              image_name += "_THUMB";
              break;
          case 'KEY':
              image_name += "_KEY";
              break;
          default:
              image_name += "_THUMB";
              break;
      }
  
      switch (mountingValue) {
          case 'FWM':
              image_name += "_FWM.jpg";
              break;
          case 'BJM':
              image_name += "_BJM.jpg";
              break;
          default:
              image_name += "_FWM.jpg";
              break;
      }
  
      $('#formula').attr('src', image_name);
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;table border="1" width="30%" cellspacing="5" cellpadding="3"&gt;
    &lt;tr&gt;
      &lt;td width="100%"&gt;
      &lt;input type="radio" name="guides" value="WOOD" id="wood" checked&gt; Wood Guides
      &lt;p&gt;&lt;input type="radio" name="guides" value="ALUMINUM" id="aluminum"&gt; Aluminum Guides&lt;/p&gt;
      &lt;/td&gt;
    &lt;tr&gt;
      &lt;td width="100%"&gt;
      &lt;input type="radio" name="locking" value="THUMB" id="THUMBTURN" checked&gt; Thumb Turn Lock
      &lt;p&gt;&lt;input type="radio" name="locking" value="KEY" id="KEYCYLINDER"&gt; Key Cylinder Lock&lt;/p&gt;
      &lt;/td&gt;
    &lt;tr&gt;
      &lt;td width="100%"&gt;
      &lt;input type="radio" name="mounting" value="FWM" id="FWMounted" checked&gt; Face Wall Mounted
      &lt;p&gt;&lt;input type="radio" name="mounting" value="BJM" id="BJMounted"&gt; Between Jamb Mounted&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  
  &lt;/table&gt;
  
  &lt;p&gt;
  
  &lt;img src="Newfolder/WOOD_THUMB_FWM.jpg" name="formula" id="formula" width="384" height="96"&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>