JS .checked vs jquery attr('checked'), what is the difference?

javascript jquery attr checked
Jacob Raccuia picture Jacob Raccuia · Feb 26, 2013 · Viewed 12.3k times · Source

I can't figure this one out. According to W3 Schools, the checked property sets or returns the checked state of a checkbox.

So why does $('input').checked ? $('div').slideDown() : $('div').slideUp(); not work?

Using prop however, does work.

$('input').prop('checked') ? $('div').slideDown() : $('div').slideUp();

This is for a checkbox that is checked based on a database value.

Answer

Dennis picture Dennis · Feb 26, 2013

checked is a DOM element property so use it on DOM elements instead of jQuery objects.

$('input')[0].checked

if you have a jQuery object, use prop instead of attr since you are checking a property. Just as a reference:

$("<input type='checkbox' checked='checked'>").attr("checked") // "checked"
$("<input type='checkbox' checked='foo'>").attr("checked") // "checked"
$("<input type='checkbox' checked>").attr("checked") // "checked"
$("<input type='checkbox'>").attr("checked") // undefined

Whereas [0].getAttribute("checked") will return the actual value.

prop will return true or false based on whether or not the attribute exists at all

Related questions

.prop() vs .attr()

So jQuery 1.6 has the new function prop(). $(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style'); }) or in this case do they do the same thing? And if I do have …

Read More
Setting new value for an attribute using jQuery

I am trying to set a new vale of a custom attribute of a div using attr(). I found out it can be done using .attr( attributeName, value ), but when I try it it's not working. Here is the part …

Read More
jQuery attr('onclick')

I'am trying to change "onclick" attribute in jQuery but it doesn't change, here is my code: $('#stop').click(function() { $('next').attr('onclick','stopMoving()'); } I have an element with id="stop" and when user clicks on it I want …

Read More