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.

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

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

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

Answer 4

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

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