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

Question

假设您有一个复选框,该复选框已选中.在Chrome或Firefox中,单击inspect元素时,在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

这只是attribute加载时元素的HTML定义的默认属性.如果未选中,DOM property那就是实际切换的内容.这就是属性似乎没有改变的原因.

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

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

这是JSFiddle