title: jquery checking radio input not working
body: <p>Im having a problem trying to check a radio input using JQuery. I'm just starting to learn so bear with me.</p>
  
  <p>I have 4 radio buttons that i want to be able to scroll through using clicks. The problem is i can only ever get the first if statement to work. Here's my html: </p>
  
  <pre><code>&lt;a class="back"&gt; &lt; &lt;/a&gt;
    &lt;input type="radio" name="radio-control" id="radio-1" checked="checked"/&gt;
    &lt;input type="radio" name="radio-control" id="radio-2"/&gt;
    &lt;input type="radio" name="radio-control" id="radio-3"/&gt;
    &lt;input type="radio" name="radio-control" id="radio-4"/&gt;
  &lt;a class="next"&gt; &gt; &lt;/a&gt;
  </code></pre>
  
  <p>and my JQuery:</p>
  
  <pre><code>if($('#radio-1').is(':checked')) { 
    $('.next').click(function() {
      $("#radio-2").prop("checked", true)
    });
  }
  if($('#radio-2').is(':checked')) { 
    $('.next').click(function() {
      $("#radio-3").prop("checked", true)
    });
    $('.back').click(function() {
      $("#radio-1").prop("checked", true)
    });
  }
  });
  </code></pre>
  
  <p>Here it is on codepen: <a href="http://codepen.io/anon/pen/LpGOqq" rel="nofollow">http://codepen.io/anon/pen/LpGOqq</a></p>
  
  <p>If anyone could provide some input it would be much appreciated.</p>