How do you check for whether a checkbox is checked or not checked?

Question

I thought this would work:

if ($(this).attr('checked')) {}

but I had to write it this way:

if ($(this).is(':checked')) {}

Q: Why?

Why is not a question. What about this seems strange 2k user? — Hogan
– Hogan, Commented May 12, 2011 at 17:22
Are you using the latest version of jQuery? Because then you'd have to use .prop instead of .attr — sdleihssirhc
– sdleihssirhc, Commented May 12, 2011 at 17:25
@Pixelbobby -- I originally put "Because". The UI complained, so I did a re-write. — Hogan
– Hogan, Commented May 12, 2011 at 17:25
Why not use the simpler and faster if (this.checked) { ... ? — Pointy
– Pointy, Commented May 12, 2011 at 17:47

Tejs · Accepted Answer · 2011-05-12 17:25:03Z

7

When you request the attr checked, you are not getting a boolean value:

// this would be correct
if($(this).attr('checked') == 'checked')

// jQuery 1.6+
if($(this).prop('checked'))

answered May 12, 2011 at 17:25

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hogan Over a year ago

Like selected I believe there are browsers and cases where this would have failed. (Thus the change to use prop).

Pointy Over a year ago

It is perfectly OK for the value of the attribute to be the boolean constant true - specifically it does not have to be the string "checked". In the DOM, the attribute is indeed a simple boolean.

Jamie Treworgy · Accepted Answer · 2011-05-12 17:25:20Z

Having been through this recently, it depends on what version of jQuery you are using. As of 1.6, the functioning of attr with native properties (e.g. "checked", "disabled") -- properties being attributes that are supposed to either exist or not - changed, because they could return inconsistent results depending on browser behavior.

The correct way to set or test a property in 1.6 is with the new prop function, which returns true or false always. The 2nd method you use is also valid to test.

ehynds · Accepted Answer · 2011-05-12 18:25:13Z

1

Better yet, just use this.checked, which returns either "true" or "false". No need to use jQuery especially if you already have the DOM node.

answered May 12, 2011 at 18:25

ehynds

4,4633 gold badges27 silver badges23 bronze badges

2 Comments

Phillip Senn Over a year ago

I'm afraid of using any native JavaScript if there is a jQuery alternative because I don't know if it will behave one way in one browser and another way in another browser. jQuery helps me make sure my code is normalized.

ehynds Over a year ago

Understood, I take the same approach most of the time. However, the checked property is 100% cross browser, so in this particular case it will work as expected.

Collectives™ on Stack Overflow

How do you check for whether a checkbox is checked or not checked?

3 Answers 3

2 Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Related