Invalid checkbox property does not change in Chrome or Firefox Developer Tools

Question

Suppose you have the checkbox selected. In Chrome or Firefox, when you click the validation element, in 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 checkbox and uncheck it, the html will change and the property checkedwill disappear:

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

However, it is not. Why?

Answer 1

This is simply the default property defined by the HTML attributeelement at startup. When it is shot, it is DOM propertythat which actually switches. This is why the attribute does not change.

This code prints the current DOM property checkedto the console:

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

JSFiddle