By Jacob Raccuia


2013-02-26 04:26:18 8 Comments

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.

5 comments

@Rohan Kumar 2013-02-26 05:04:30

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

@Dennis 2013-02-26 04:28:16

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

@RobG 2013-02-26 04:29:33

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

@Dennis 2013-02-26 04:38:27

@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 2013-02-26 04:42:25

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

@RobG 2013-02-26 10:46:53

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

@anku_radhey 2013-09-10 09:36:08

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

@Dennis 2013-09-10 11:11:24

@anku_radhey Can you show an example at jsfiddle.net?

@asifsid88 2013-02-26 04:31:24

$('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!!

@phnkha 2013-02-26 04:29:14

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

@Blender 2013-02-26 04:27:52

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

Related Questions

Sponsored Content

56 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

65 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

17 Answered Questions

[SOLVED] .prop() vs .attr()

27 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

69 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

42 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 729861 View
  • 2674 Score
  • 42 Answer
  • Tags:   javascript jquery

33 Answered Questions

[SOLVED] What's the difference between using "let" and "var"?

3 Answered Questions

21 Answered Questions

[SOLVED] What is the difference between call and apply?

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

Sponsored Content