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

Question

I can not understand this. According to W3 Schools , the checked property sets or returns the checked state of the flag.

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

Using prop however works.

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

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

Answer 1

checked is a property of the DOM element, so use it for DOM elements instead of jQuery objects.

 $('input')[0].checked 

if you have a jQuery object, use prop instead of attr since you are checking the property. As a link:

 $("<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 

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

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

Answer 2

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

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

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

Answer 3

In this case, you need prop() , not attr() , replacing the calls with attr() with prop() in your code will 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 certain attributes, which can lead to inconsistent behavior. Starting with jQuery 1.6 , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

elem.checked ==== true (Boolean) The status of the flag will be changed

$(elem).prop("checked") ==== true (Boolean) Will be changed with the state of the checkbox

elem.getAttribute("checked") ===== "checked" (String) The initial state of the flag; does not change

$(elem).attr("checked") (1.6) ===== "checked" (String) The initial state of the flag; does not change

$(elem).attr("checked") (1.6.1+) ======== "checked" (String) The status of the flag will be changed

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

Also this url will help you to know more about your requests .prop () vs .attr ()

Difference /is-checked-vs-attr-checked-checked/7 at http://jsperf.com/is-checked-vs-attr-checked-checked/7

Also, for an understanding of The elements atttribute and properties see 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 has no verified property. You can use $ ('input') [0] .checked.

Answer 5

$('input').attr('checked') deprecated and you should use $('input').prop('checked')
Also, $('input').checked will not work, since $('input') is a jquery object and checked is a property, so jquery came up with $('input').prop('checked') for access to the property.

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

But with jquery, you should use this to access the property:

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

Hope this helps!