.attr('checked') will not tell me that the radio button is checked even when it is

Question

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: eyeballs.site88.net (this is just the quiz so there's no other distracting code).

I thought this approach would be simple:
1. start with a score of 0.
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
3. if it is, add 1 to the score
4. if it's not, do nothing
5. after the final question has been checked, announce the score to the user

All of the code seems to work just fine, except for the .attr('checked') part. I replaced this with .val() & the score added up just fine, & 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!

The following code is a simplified version (just Question 1, with only 2 answer choices):

HTML

<form action=”xxxxx” method=”post” class=”quiz”>
    <ul>
        <li  class="quizQuestionAndAnswer" id="question1" >
            <dl>

                <dt class="quizQuestion"><strong>1. An animal with horizontal, rectangular pupils is a:</strong>
                </dt>

                <dd class="quizAnswers">

                    <div>
                         <input type="radio" name="question1Answer" id="question1answerA"  value="goat"     >
                         <label for="question1answerA">goat</label>
                    </div>

                    <div>
                        <input type="radio" name="question1Answer" id="question1answerB" value="elephant" >
                        <label for="question1answerB">elephant</label>
                    </div>

                </dd>

            </dl><!--end question1-->
        </li>
    </ul>
</form>

JAVASCRIPT

<script>
$(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
</script>

I'd very grateful for any suggestions! :) uphillfun ps: I'm using jQuery 1.11.0, & Firebug console does not show any errors!

Answer 1

you can use instead:

if($('#question1answerA').prop('checked'))

Answer 2

Others ways to check if the box is checked

$('#question1answerA')[0].checked

$('#question1answerA:checked').length

$('#question1answerA').is(':checked')