Why clicking on checkbox does not add the attribute checked='checked'

Question

When I click a checkbox, why does checked attribute is not getting added?. You can see the code here http://jsfiddle.net/FCrSg/

Solution 1

What are you trying to do? Find out if its checked?

$('.user_roles').click(function(){ 
    console.log( $(this).is(':checked'));
});

http://jsfiddle.net/petersendidit/FCrSg/1/

Solution 2

The HTML attribute checked means: checked by default, when the page loads. This won't change when the checkbox is clicked.

<input type="checkbox" checked="checked"> <!-- The HTML attribute -->

The DOM property checked is actually the current state of the checkbox and is either true/false. This will change when the checkbox is clicked, but isn't visible when you inspect the HTML.

$('input:check')[0].checked == true;
// Whether or not the checkbox is currently checked

Solution 3

If you want to see it appear on the element displayed in the console, use the native setAttribute() method.

Example: http://jsfiddle.net/FCrSg/2/

this.setAttribute('checked',this.checked);

So it would look like this:

$('.user_roles').click(function(){
    this.setAttribute('checked',this.checked);
    console.log( $(this) );
});

Then the console should give you:

<input class=​"user_roles" type=​"checkbox" checked=​"true">​

Though you normally wouldn't need the attribute set like that. Typically the property is enough.

Comments

[mdrg]

Let's clear things out... are you expecting the 'checked' attribute to appear on the HTML?

[andres descalzo]

see stackoverflow.com/questions/3602170/…

[Tim Down]

This is the answer. Forget about attributes.

[damon]

above solution work for me perfectly fine but i used also prop() function that was also work perfectly fine but for same code dose not work whats the reason behind it please tell me

[Admin]

This response does not actually answer the question.

[ADJenks]

Can you please cite your references?

[vgrinko]

are there any references? would much appreciate if you could share.

[Rich Court]

I'm sure everyone's moved on from this by now, but for the people asking for references: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…