title: How to replace radio buttons with images
body: <p>How do I fix this code so that the images show up. They aren't showing up where the radio buttons used to be. I've tried several different methods on different occassions and this seems to be the most promising but I just can't seem to make the images appear where they should. Please don't tell me how many times this was answered because you don't know how many attempts I gave MANY of them. I just want help with getting the images in place of the radio buttons with javascript. Please use jsfiddle for examples. I may be missing labels but I don't know where to put them.
  <a href="http://jsfiddle.net/uuyAq/" rel="nofollow">http://jsfiddle.net/uuyAq/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
          &lt;script&gt;
  
      var images = {
  1: 'http://wepriceit.webs.com/ipad-5-image.jpg',
  2: 'http://wepriceit.webs.com/ipad-5-image.jpg',
  3: 'http://wepriceit.webs.com/ipad-5-image.jpg',
  4: 'http://wepriceit.webs.com/ipad-5-image.jpg',
  5: 'http://wepriceit.webs.com/ipad-5-image.jpg'
  };
  
  $('input[type=radio][name^=question]').each(function() {
  var id = this.id;
  $(this)
        .hide()  // hide the radio button
        .after('&lt;img src="'+ images[id] +'"&gt;'); // insert the image 
                                                // after corresponding radio
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script&gt;
  function tryToMakeLink()
  {
      //get all selected radios
      var q1=document.querySelector('input[name="q1"]:checked');
      var q2=document.querySelector('input[name="q2"]:checked');
      var q3=document.querySelector('input[name="q3"]:checked');
      //make sure the user has selected all 3
      if (q1==null || q2==null ||q3==null)
      {
          document.getElementById("linkDiv").innerHTML="&lt;input type=button 
  disabled=disabled value=Next&gt;";
      }
      else
      {
          //now we know we have 3 radios, so get their values
          q1=q1.value;
          q2=q2.value;
          q3=q3.value;
          //now check the values to display a different link for the desired   
  configuration
          if (q1=="AT&amp;T" &amp;&amp; q2=="8GB" &amp;&amp; q3=="Black")
          {
            document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next  
  onclick=\"window.location.href='http://google.com/';\"&gt;att 8gb black&lt;/input&gt;";
          }
          else if (q1=="Other" &amp;&amp; q2=="8GB" &amp;&amp; q3=="White")
          {
              document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://yahoo.com/';\"&gt;other 8b white&lt;/input&gt;";
          }
          else if (q1=="AT&amp;T" &amp;&amp; q2=="16GB" &amp;&amp; q3=="White")
          {
              document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://bing.com/';\"&gt;another option&lt;/input&gt;";
          }
          else if (q1=="AT&amp;T" &amp;&amp; q2=="16GB" &amp;&amp; q3=="Black")
          {
              document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://gmail.com/';\"&gt;oops&lt;/input&gt;";
          }
          else if (q1=="AT&amp;T" &amp;&amp; q2=="8GB" &amp;&amp; q3=="White")
          {
              document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://hotmail.com/';\"&gt;can't&lt;/input&gt;";
          }
          else if (q1=="Other" &amp;&amp; q2=="8GB" &amp;&amp; q3=="Black")
          {
            document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://images.google.com/';\"&gt;yours&lt;/input&gt;";
          }
          else if (q1=="Other" &amp;&amp; q2=="16GB" &amp;&amp; q3=="White")
          {
              document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://youtube.com/';\"&gt;mines&lt;/input&gt;";
          }
          else if (q1=="Other" &amp;&amp; q2=="16GB" &amp;&amp; q3=="Black")
          {
              document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://docs.google.com/';\"&gt;what&lt;/input&gt;";
          }
          else if (q1=="Unlocked" &amp;&amp; q2=="8GB" &amp;&amp; q3=="White")
          {
              document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://wepriceit.webs.com/';\"&gt;red&lt;/input&gt;";
          }
          else if (q1=="Unlocked" &amp;&amp; q2=="8GB" &amp;&amp; q3=="Black")
          {
              document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://webs.com/';\"&gt;orange&lt;/input&gt;";
          }
          else if (q1=="Unlocked" &amp;&amp; q2=="16GB" &amp;&amp; q3=="White")
          {
              document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://gazelle.com/';\"&gt;green&lt;/input&gt;";
          }
          else if (q1=="Unlocked" &amp;&amp; q2=="16GB" &amp;&amp; q3=="Black")
          {
              document.getElementById("linkDiv").innerHTML="&lt;input type=button value=Next 
  onclick=\"window.location.href='http://glyde.com/';\"&gt;blue&lt;/input&gt;";
          }
      }
  }
  &lt;/script&gt;
  
  &lt;form name="quiz" id='quiz'&gt;
  
  
  What carrier do you have?
  &lt;ul style="margin-top: 1pt" id="navlist"&gt;
      &lt;li style="list-style: none;"&gt;&lt;input type="radio" onclick=tryToMakeLink();   
  name="q1" value="AT&amp;T" id="1"/&gt;AT&amp;T&lt;/li&gt;&lt;label for="1"/&gt;
      &lt;li style="list-style: none;"&gt;&lt;input type="radio" onclick=tryToMakeLink(); 
  name="q1" value="Other" id="2"/&gt;Other&lt;/li&gt;&lt;label for="2"/&gt;
      &lt;li style="list-style: none;"&gt;&lt;input type="radio" onclick=tryToMakeLink(); 
  name="q1" value="Unlocked" id="3"/&gt;Unlocked&lt;/li&gt;&lt;label for="3"/&gt;
  &lt;/ul&gt;
  
  What is your phones capicity?
  &lt;ul style="margin-top: 1pt" id="navlist"&gt;
      &lt;li style="list-style: none;"&gt;&lt;input type="radio" onclick=tryToMakeLink(); 
  name="q2" value="8GB" id="4"/&gt;8GB&lt;/li&gt;&lt;label for="4"/&gt;
      &lt;li style="list-style: none;"&gt;&lt;input type="radio" onclick=tryToMakeLink(); 
  name="q2" value="16GB" id="5"/&gt;16GB&lt;/li&gt;&lt;label for="5"/&gt;
  &lt;/ul&gt;
  
  What color is your phone?
  &lt;ul style="margin-top: 1pt" id="navlist"&gt;
      &lt;li style="list-style: none;"&gt;&lt;input type="radio" onclick=tryToMakeLink(); 
  name="q3" value="Black" id="6"/&gt;Black&lt;/li&gt;&lt;label for="6"/&gt;
      &lt;li style="list-style: none;"&gt;&lt;input type="radio" onclick=tryToMakeLink();  
  name="q3" value="White" id="7"/&gt;White&lt;/li&gt;&lt;label for="7"/&gt;
  &lt;/ul&gt;
  
  
  
  &lt;br&gt;
  &lt;div id=linkDiv&gt;
   &lt;input type=button disabled=disabled value=Next&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/uuyAq/" rel="nofollow">http://jsfiddle.net/uuyAq/</a></p>