Code doesn't do anything when replacing Javascript with Jquery

Question

I have this javascript code:

var right = document.getElementById("true").checked;
var wrong = document.getElementById("false").checked;

if (right){
    answer += 100;
}

I want to replace the Javascript with jQuery, so I replaced this line:

var right = document.getElementById("true").checked;

with this:

var right = $('#true')[0].attr('checked');

I have also downloaded and added the jQuery file to my HTML:

<script src="jquery-1.11.2"></script>

However when I replaced the above JS code with jQuery it isn't working at all. What am I doing wrong ?

EDIT: I have also tried this,

function calc(){
    $(function() {
        var isTrue = $('#true').attr('checked');    
    });

    var wrong = document.getElementById("false").checked;

    if (right){
        answer += 100;
    }
}

But it is still not working.

Rory McCrossan · Accepted Answer · 2015-04-24 10:45:34Z

3

The problem is that the [0] accessor on the jQuery object returns the native DOMElement. This does not have an attr() method, so if you checked the console you'd most likely see an error.

In your case you should instead just call attr() (or better yet, prop()) on the object resulting from the selector. Also, don't forget to wrap your code in a document.ready handler. Try this:

$(function() {
    var right = $("#true").prop('checked');
    var wrong = $("#false").prop('checked');

    if (right){
        answer += 100;
    }
});

edited Apr 24, 2015 at 10:45

answered Apr 24, 2015 at 10:40

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andreas Louv Over a year ago

Can you tell OP why he should use .prop instead of .attr? api.jquery.com/prop

Riley Willow Over a year ago

@Rory, Should I just create this jquery function inside Javascript function ? Like i showed in my question ? (please see the edit)

Rory McCrossan Over a year ago

@RileyWillow ah, if you are executing your code from a function, you do not need the $(function() { }) wrapper.

MugiwaraUK · Accepted Answer · 2015-04-24 10:45:45Z

1

When using jQuery 1.9+ the attr('checked') gets the initial state of the checkbox when its state changes you need to use the prop() function.

$('#true').prop('checked');

edited Apr 24, 2015 at 10:45

answered Apr 24, 2015 at 10:40

MugiwaraUK

1935 bronze badges

Comments

MatejG · Accepted Answer · 2015-04-24 10:40:30Z

1

ID is unique identificator. You should have only one unique ID in your HTML. That means, you don't need to put there array identificator. Do it like this:

var right = $('#true').attr('checked');

answered Apr 24, 2015 at 10:40

MatejG

1,4231 gold badge17 silver badges26 bronze badges

Comments

Dhaval Marthak · Accepted Answer · 2015-04-24 10:42:22Z

1

Try

var right = $('#true').attr('checked');

instead of

var right = $('#true')[0].attr('checked');

and you should use

var right = $('#true').prop('checked');

because $('#true')[0] returns you the DOM element and .attr() works with jQuery object.

edited Apr 24, 2015 at 10:42

answered Apr 24, 2015 at 10:39

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Collectives™ on Stack Overflow

Code doesn't do anything when replacing Javascript with Jquery

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related