Check box checked property doesn't change in Chrome or Firefox Developer Tools

Question

Suppose you have a check box, which is checked. In Chrome or Firefox, when you click inspect element, in the HTML you will see:

<input checked="checked" class="some-class" id="some-id" name="some-name" type="checkbox" value="some-value">

I expect, that when I click on the check box and uncheck it, the html will change and the checked property will disappear:

<input class="some-class" id="some-id" name="some-name" type="checkbox" value="some-value">

However, that's not the case. Why?

Answer 1

That is just the default property defined by the HTML attribute of the element when loaded. When unchecked, its the DOM property that is whats actually toggled. Which is why the attribute does not seem to change.

This follow code outputs the current DOM checked property to the console:

$("input").click(function(){
    console.log($(this)[0].checked);
});

Here is the JSFiddle