Question

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

<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/中看到：

加载时点击检查：checked = checked

取消选中框：已选中=已选中

更改为false：alert确认checked属性为false，但检查出来会将innerHTML显示为已选中。

我需要在加载了正确的信息的情况下访问这个innerHTML（如果有复选标记，html应该反映出来）

预编辑：我想我可以通过点击标签的事件来做到这一点。该事件采用（“parentElement”）。innerHTML并将其拆分在几个不同的位置，并将其与正确的选中值一起重新组合。如果未开始检查输入，则会略有不同。这是我能想到做到这一点的唯一方式，而且看起来似乎并不正确。

Answer 1

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

为了证明这一点，请尝试在包含value="old"的网页上放置一个文本框，更改值，然后比较element.getAttribute("value")和element.value - 它们不相同。< / p>

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

Answer 2

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

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

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

更改输入值后innerHTML未更新（checked = true / false /“checked”）

2 个答案: