title: .attr('checked') will not tell me that the radio button is checked even when it is
body: <p>my first question!...  I'm a uni student trying to make a simple, multiple-choice quiz.  I've almost finished it (the bare bones of it) but can't calculate the final score of the user.  The quiz can be see online at:  <a href="http://eyeballs.site88.net/" rel="nofollow">eyeballs.site88.net</a>  (this is just the quiz so there's no other distracting code).</p>
  
  <p>I thought this approach would be simple:<br>
  1. start with a score of 0.<br>
  2. when the "Answers" button is clicked on by the user, (for each question) check to see if the radio button next to the correct answer is checked<br>
  3. if it is, add 1 to the score<br>
  4. if it's not, do nothing<br>
  5. after the final question has been checked, announce the score to the user</p>
  
  <p>All of the code seems to work just fine, except for the .attr('checked') part.  I replaced this with .val() &amp; the score added up just fine, &amp; was announced at the end.  However, even when the correct answer is checked, 1 will not be added to the score.  I have seen .attr('checked') in action before - it checked to see if a checkbox "Same as Above" had been checked:  if it was checked a div slid out of view; if it was unchecked the div slid back into view.  But I can't get anything to happen!</p>
  
  <p>The following code is a simplified version (just Question 1, with only 2 answer choices):</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form action=”xxxxx” method=”post” class=”quiz”&gt;
      &lt;ul&gt;
          &lt;li  class="quizQuestionAndAnswer" id="question1" &gt;
              &lt;dl&gt;
  
                  &lt;dt class="quizQuestion"&gt;&lt;strong&gt;1. An animal with horizontal, rectangular pupils is a:&lt;/strong&gt;
                  &lt;/dt&gt;
  
                  &lt;dd class="quizAnswers"&gt;
  
                      &lt;div&gt;
                           &lt;input type="radio" name="question1Answer" id="question1answerA"  value="goat"     &gt;
                           &lt;label for="question1answerA"&gt;goat&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div&gt;
                          &lt;input type="radio" name="question1Answer" id="question1answerB" value="elephant" &gt;
                          &lt;label for="question1answerB"&gt;elephant&lt;/label&gt;
                      &lt;/div&gt;
  
                  &lt;/dd&gt;
  
              &lt;/dl&gt;&lt;!--end question1--&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function()  {
  
  
              var score=0, 
                  $questionAndAnswer=$('.quizQuestionAndAnswer');
  
      $questionAndAnswer.on('click', '.answersQuizButton', function()   {
  
          if(  $('#question1answerA').attr('checked')   )   {
              score=score+1;
          }  //end if
          if(  $('#question2answerC').attr('checked')   )   {
              score=score+1;
          }  //end if
  
          alert(score);
  
      });  //end on (click)
  
  });  //end ready
  &lt;/script&gt;
  </code></pre>
  
  <p>I'd very grateful for any suggestions!
  :)  uphillfun  ps:  I'm using jQuery 1.11.0, &amp; Firebug console does not show any errors!</p>