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.

Marinemarinelli

Ones jQuery the other is not – Gastrectomy

Replace .attr() with .prop(), because .prop() is faster – Romilly

Answer 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

Treatise

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

@Intransitive 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. – Treatise

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

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

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.. – Carryingon

Answer 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').

Footsore

Answer 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

Homogenetic

Answer 4

$('input') returns a JQuery object and it doesn't have checked property. You can use $('input')[0].checked.

Teraterai

Answer 5

$('input').attr('checked') is outdated and one should use $('input').prop('checked')
Moreover, $('input').checked will not work as $('input') is the jquery object and checked is the property so that is why jquery has come up with $('input').prop('checked') to access the property.

However to convert jQuery object to DOM object you need to do
$('input')[0].checked this becomes the DOM Object and then you can access the property directly with .

But with jquery to access the property one should use this:

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

Hope this helps!!

Territory