更改输入值后不更新 innerHTML (checked = true/false/"checked")

Question

简介：我需要抓取parentElement中的信息，但我需要更新输入信息。当我抓取 parentElement 的 innerHTML 时，在取消选中该框后，它仍然显示为选中状态。 html 没有反映我使用 javascript 所做的更改。

我的代码在这里有一个小的 sn-p：http://jsfiddle.net/7993K/8/

<div id="parentElement">
<label id="thisLabel">
    <input type="checkbox" id="idnumber" checked="checked"> Bring Mail Inside
</label>
</div>
<p>
<a onClick="checkit()">Check it out</a>
</p>
<p onclick="checkToggle()">change to false</p>


function checkit() {
alert(document.getElementById("parentElement").innerHTML);
}
function checkToggle() {
element = document.getElementById("thisLabel");
element.childNodes[0].checked = false;
alert("the checkbox is checked: " + element.childNodes[0].checked);
}

我为什么要这样处理的稍微长一点的版本： 这是现场检查员检查的大型表格。它被带入一个在线软件应用程序，负责与客户沟通的女士将审查这些信息，并通过电话与检查员交谈。此表单以 html 格式保存在数据库中。女性完成表格审核后，可能有一两个框没有被检查，她想在通过电子邮件发送给客户之前检查（有问题，需要修复，现在已经修复，她可以发出正确的报告，表明一切都已检查）

她选中了这些框，但它们不会更新 HTML，它们只会更改值，该值会显示，但在我获取 parentElement 的 innerHTML 时不会显示。你会在我的 JSFIDDLE 中看到http://jsfiddle.net/7993K/8/：

加载时点击check out：checked=checked

取消选中框：选中 = 选中

更改为 false：alert 确认选中的属性为 false，但 check out 显示 innerHTML 已选中。

我需要在加载了正确信息的情况下访问这个 innerHTML（例如，如果它被选中，则 html 应该反映这一点）

预编辑：我想我可以通过点击标签的事件来做到这一点。该事件采用 ("parentElement").innerHTML 并将其拆分到几个不同的位置，然后将其与正确的检查值一起放回原处。如果输入没有被检查，会略有不同。这是我能想到的唯一方法，而且它似乎不是正确的方法。

Answer 1

复选框的状态和输入框的值不是源 HTML 的一部分。

为了证明这一点，请尝试在带有 value="old" 的页面上放置一个文本框，更改值，然后比较 element.getAttribute("value") 和 element.value - 它们不一样。

你真的应该保存表单的状态，而不是它背后的 HTML。

Answer 2

这是因为element.childNodes[0].checked = false; 正在设置DOM 属性，它是一个独立于HTML 属性 的实体。

您的checkit 函数也应该询问DOM 属性，而不是检查innerHTML。

有关 DOM 属性和 HTML 属性的更多信息，请参阅 this question。