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

Question

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.

Solution 1

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

Solution 2

checked is a property of the DOM object, not of the jQuery object. To make it work, you'd have to get the DOM object:

$('input')[0].checked;

You could also do .is(':checked').

Solution 3

In this case you need prop() rather than attr(), replacing calls to attr() with prop() in your code will generally work.

From http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr()retrieves attributes.

elem.checked ==== true (Boolean) Will change with checkbox state

$(elem).prop("checked") ==== true (Boolean) Will change with checkbox state

elem.getAttribute("checked")====="checked" (String) Initial state of the checkbox; does not change

$(elem).attr("checked") (1.6) ====="checked" (String) Initial state of the checkbox; does not change

$(elem).attr("checked") (1.6.1+) ========"checked" (String) Will change with checkbox state

$(elem).attr("checked") (pre-1.6) =======true (Boolean) Changed with checkbox state

Also this url will help you more about your queries .prop() vs .attr()

A difference of /is-checked-vs-attr-checked-checked/7 on http://jsperf.com/is-checked-vs-attr-checked-checked/7

Also to understand The elements atttribute and properties refer http://christierney.com/2011/05/06/understanding-jquery-1-6s-dom-attribute-and-properties/ http://jsperf.com/is-checked-vs-attr-checked-checked/7

Comments

[RobG]

If you wanted to actually check the attribute, would you use attr or $('input')[0].getAttribute('checked')?

[Dennis]

@RobG I personally tend to use raw DOM over jQuery, but it would depend on the situation. And checked is a bad example since value doesn't matter - it is a boolean attribute.

[Blender]

@RobG: jQuery does some stuff to boolean attributes, so you'd have to use getAttribute if you want the real value.

[RobG]

Yeah, jQuery's attr has been broken forever, just messing around. jQuery's mistake was trying to make attributes equivalent to properties.

[Ankit Sharma]

why there is difference when i use attr and [0].checked.. when i used [0].checked = true then the checkbox got checked but when i tried attr("checked","checked") three times after unchecking through removeAttr then i found that third time checkbox was not checked but i tracked the object and i found that checked="checked" was there but checked = false was also there..