复选框选中的属性在Chrome或Firefox开发者工具中不会更改

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