8

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?

Alexander Popov
  • 23,073
  • 19
  • 91
  • 130
  • Possible duplicate of [Checkboxes not displaying Chrome - Work in other browsers](https://stackoverflow.com/questions/16632955/checkboxes-not-displaying-chrome-work-in-other-browsers) – Shanimal Jun 28 '19 at 21:09
  • When you inspect in Chrome the default is to show "styles" for that element. But if you click "properties" to the right you can scroll down and see the status of "checked" and other properties such as "disabled" and so on. – Norbert Norbertson Oct 04 '22 at 15:37

1 Answers1

11

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

Ahs N
  • 8,233
  • 1
  • 28
  • 33
  • 2
    Thank you for the answer. I think this is best explained here: http://stackoverflow.com/a/6004028/1836143 In particular the Update. – Alexander Popov Dec 10 '15 at 08:10