Thanks for the report, but this is not a jQuery bug. The checked ''property'' is not the same as the checked ''attribute''. .attr sets the property value, which is not reflected in the DOM.

Duplicate #3879

Replying to [comment:1 snover]:

Thanks for the report, but this is not a jQuery bug. The checked ''property'' is not the same as the checked ''attribute''. .attr sets the property value, which is not reflected in the DOM.

Could you possibly provide a better explanation? I understand that when you set a property in jQuery it is not setting the attribute until it gets added to the DOM. However, when you call .html() on the jQuery all other attributes set through jQuery properties are included in the resulting html string. Should the html() call not reflect the current state of the element so that you can recreate it?

It also can cause inconsistencies between the jQuery properties and the outputted html. See this example I've put together (http://jsfiddle.net/3q2fm/).

Is there some particular reason why checked is treated in this way?

Thanks

Iain

jQuery’s .attr currently looks to see if a DOM HTML property exists on the object, and if it does will set that property instead of calling setAttribute. Very convenient and usually faster, but an occasionally undesired side-effect of this behaviour is that the attributes NamedNodeMap does not get updated when a DOM HTML property is changed. (For reference, attributes is the array-like structure that stores the actual attributes for an element that form its serialized representation.) I think that’s about as good an explanation as any.

Thanks for the response.

So in summary, for speed benefits in jQuery we can't always rely on .html() being an accurate representation of the object.

The takeaway would be that the DOM HTML spec does not say that its interfaces should cause any modification to the portions of the Element object that are used for serialization, and indeed they do not.

This method’s behaviour will change significantly in 1.5 to stop doing this.

I think we should consider of making 'checked' attribute for checkboxes as special cases.

Compare two approaches

var html = '<input type="checkbox" checked="checked">';

and

var html = $('<p>').append($('<input>', {type: 'checkbox', checked: 'checked'})).html()

I would prefer to use second approach because I think that string manipulation is not good enough :)

But because of this 'issue' I cannot achieve expected behavior.

Replying to [comment:7 mnaoumov]:

I don't understand. You can do both of those. http://jsfiddle.net/timmywil/mNvYG/1/

Replying to [comment:8 timmywil]:

Replying to [comment:7 mnaoumov]: I don't understand. You can do both of those. http://jsfiddle.net/timmywil/mNvYG/1/

Try to change on your jsfiddle example jQuery version from 'edge' to '1.5.1'.

You will see the issue.

On my project I'm using 1.5.2 and having the same issue.