alert($(element).attr('checked'));

//alerts 'undefined'

How do I check if a checkbox is checked in jQuery? In the past I have always used the .attr() method like above. Today I noticed it was not working and was spitting out undefined for checked inputs, after looking again at the documentation, I found the answer was jQuery 1.6. A new method .prop() has been added.

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.

Further clarification over on the .prop() method documentation page.

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() only retrieves attributes.

So summarising, use .prop() to set and retrieve property values, and .attr() to retrieve attributes…seems rather obvious but for anyone not familiar with the new prop method it can be frustrating.

Update

The jQuery blog has an in depth article about the changes from jquery 1.5.2 to 1.6, with detailed explanation on the attr and prop methods