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

Question

假设您有一个选中的复选框。在Chrome或Firefox中，当您单击检查元素时，在HTML中您将看到：

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

我希望，当我点击复选框并取消选中它时，html会改变，checked属性将会消失：

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

但事实并非如此。为什么呢？

Answer 1

这只是加载时元素的HTML attribute定义的默认属性。取消选中时，实际切换的DOM property是什么。这就是属性似乎没有改变的原因。

此跟随代码将当前DOM checked属性输出到控制台：

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

Here is the JSFiddle