javascript - jQuery .prop ('checked' ) 不更改 HTML 中的实际检查属性

Question

好吧，这很可能是一个相当愚蠢的问题，但我很难理解这个问题......

在页面加载/生成时我添加了 checked="checked"到我的<input type="checkbox" value="1">通过基于实际数据库条目的 PHP。

在处理表单后，我正在通过 Javascript/jQuery 读取输入的检查状态，以便 (AJAX-) 提交表单并更新数据库条目。

问题是即使我的 JS-evaluation _this.is(':checked')返回 false实际的 HTML/DOM 表示仍然显示选中的属性 <input type="checkbox" value="1" checked="checked"> .

我知道我可以 .removeAttr('checked')但这没有意义(一切正常)，也不推荐(参见 this SO question ...)

---

我的问题是:这是正常行为吗？我应该简单地忽略不一致吗？我没有得到什么？

感谢您付出时间和精力!

Answer 1

这是完全正常的。您在源代码中看到的属性是元素的原始状态。 prop() 获取/设置的底层属性可以不同。

这是一个例子:

var $cb = $(':checkbox');

console.log('attr: ' + $cb.attr('checked'), 'prop: ' + $cb.prop('checked'));

$cb.prop('checked', false);

console.log('attr: ' + $cb.attr('checked'), 'prop: ' + $cb.prop('checked'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" checked="checked" />

请注意，即使在设置 prop('checked', false) 之后，attr() 仍会读取 checked 属性，该属性在页面加载。

正是出于这个原因，您应该始终尽可能使用prop()。