setting checked state using attr() vs using prop()

Question

I am trying to check and uncheck boxes when i am clicking through a series of divs. For example I have a list of three divs and each div correspond to one check box. When I select one div I should be checking a box and unchecking the box selected before with the previous click.

Here is my html

<div class="trigger">1</div>
<div class="trigger">2</div>
<div class="trigger">3</div>

<input id="one" type="checkbox">
<input id="two" type="checkbox">
<input id="three" type="checkbox">

and js

$('.trigger').click(function(){
    $('input[type=checkbox]').attr('checked', false);
    $('input[type=checkbox]').eq($(this).index('.trigger')).attr('checked', true);
});

The process runs fine for the first loop and stops working after the first iteration.But if i use .prop() instead of .attr(), it is working fine.

$('.trigger').click(function(){
    $('input[type=checkbox]').prop('checked', false);
    $('input[type=checkbox]').eq($(this).index('.trigger')).prop('checked', true);
});

can anybody explain the reason of this ??

Is there any reason you're not using `1`? And if you want just one, what's wrong with radio buttons? That way, you don't need jQuery at all! — Niet the Dark Absol, Jul 29 '13 at 06:48
@Kolink i just want to know if i can set checked property using '.attr()' in first iteration, why can't i do the same after first iteration of click events, and why it is not the case when i am using '.prop()'. — schnill, Jul 29 '13 at 06:53
It's not working because you're changing the attribute, not the property, so on the next iteration jQuery will check the property, which hasn't changed, only the attribute has, and it will fail. That's why you should **always use prop() for setting properties**. — adeneo, Jul 29 '13 at 06:55
@Nesmar my question not about using buttons, it is about different behaviour of .prop() and .attr() when setting state of checkboxex. — schnill, Jul 29 '13 at 06:56
@adeneo but if in first iterarion, by changing the attribute(not the property) checkbox is in checked state (that means property has change) and same attr() is changing it to false also, why in next iteration by changing the attribute value (in similar manner) it is not changing the property ? — schnill, Jul 29 '13 at 07:03

score 2 · Accepted Answer · answered Jul 29 '13 at 07:08

The following paragraph from the documentation explains this behaviour:

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property.

dreamweiver · Answer 2 · 2020-01-29T05:56:03.090

There is a significant difference between .prop() and .attr()

Attributes vs. Properties

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.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

NOTE:For more info check offical jQuery site,http://api.jquery.com/prop/

Happy Coding :)

setting checked state using attr() vs using prop()

2 Answers2