.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!

Btw, [**this**](http://stackoverflow.com/a/6432259/1223045) will give you the reason why it's not working — asprin, May 08 '14 at 10:59
apologies, I'm new to this (& nervous!). I've just edited the question to include the variable you questioned. It is in the original code. :) — uphillfun, May 08 '14 at 11:16
Np, do check the link I provided which tells you why `.attr()` isn't working, but `.prop()` will. — asprin, May 08 '14 at 11:27

Alex Char · Accepted Answer · 2014-05-08T10:56:07.247

2

you can use instead:

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

edited May 08 '14 at 10:56

answered May 08 '14 at 10:49

Alex Char

32,879
9
49
70

1

`prop` returns a boolean here: it makes no sense to compare it with `true`. – lonesomeday May 08 '14 at 10:50
I tried .prop('checked') instead & it worked perfectly! I have not heard of this function before (I'm a uni student new to jQuery). Are you able to tell me why it worked? According to my textbook .attr('checked') should work (there's an example in the textbook but working with a checkbox, not a radio button). :) – uphillfun May 08 '14 at 11:05
You try to use a custom attribute named "checked" but is not exist in radio element. Hope it helps:) – Alex Char May 08 '14 at 11:12
@Alexandros Thanks so much! I would like to "accept" your answer but don't know how to do that!..... edit: just figured it out! Victory on my very 1st question, thanks to you! – uphillfun May 08 '14 at 11:19

score 0 · Answer 2 · answered May 08 '14 at 11:02

0

Others ways to check if the box is checked

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

$('#question1answerA:checked').length

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

answered May 08 '14 at 11:02

Spokey

10,974
2
28
44

those suggestions are a little above my head, as I'm a newbie, but I'll definitely check them out! thanks :) – uphillfun May 08 '14 at 11:24

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

2 Answers2