Javascript 'innerHTML' 方法覆盖复选框选择

Question

我有一个表单 id="myForm" 或 document.forms[0]，带有复选框输入，我在 Javascript 函数和另一个 HTML 表单 id="addForm" 或 document.forms[1] 的帮助下动态编写它，它有一个文本框和一个可点击的按钮。

myForm 是：

<form id="myForm" action="Save.php" method="post">
    <div id="skillSet"></div>
    <input type="submit">    
</form>

我的 addForm 是：

<form id="addForm"><input id="skillAdd" type="text" name="newSkillName">
    <input class="button" type="button" value="Add" onClick="addSkill(document.forms[1].newSkillName.value)">
</form>

而我的 javascript 函数 addSkill() 是：

function addSkill(newSkill)
{
    if(newSkill.length > 0)
    {
        var inner = document.getElementById("skillSet").innerHTML;
        var newSkillDefinition = ('<div class="skillName"><label><input type="checkbox" checked name="skill[]" value="' + newSkill + '" title="Toggle Selection">' + newSkill + '</label></div>');
        document.getElementById("skillSet").innerHTML = inner + newSkillDefinition;
    }
}

好吧，我给你们一个场景： 使用addForm，我在 myForm 中添加了 5 个复选框，当然，所有 5 个都默认选中，因为复选框“已选中”属性。但我决定取消选中其中的 3 个。在此之后，我添加了另一个复选框项目。一旦我这样做，我以前的所有复选框项目都会自动检查。所以我之前的选择全部消失了！

我知道这肯定与“checked”属性以及我正在使用的 innerHTML 有关。

真是让人头疼。有什么办法可以解决这个问题吗？

Answer 1

您可以通过使用 JavaScript appendChild 方法来避免这种麻烦，而不是替换整个 HTML。类似的东西：

function addSkill(newSkill)
{
    if(newSkill.length > 0)
    {
        var skillSet = document.getElementById("skillSet"),
            skill = document.createElement('div'),
            label = document.createElement('label'),
            input = document.createElement('input');

        input.type = "checkbox";
        input.checked = "true";
        input.name = "skill[]";
        input.value = newSkill;
        input.title = "Toggle Selection";

        label.appendChild(input);
        skill.appendChild(label);

        skill.className = "skillName";

        skillSet.appendChild(skill);
    }
}

Answer 2

添加一个节点而不是使用innerHTML：

var skillSet = document.getElementById("skillSet")
 //Create elements
var div = document.createElement('div'),
var label =  document.createElement('label');
var input = document.createElement('input');
var newSkill = "This is a new skill";
//Setup input
input.type  = "checkbox";
input.checked = true;
input.name = "skill[]";
input.val = newSkill;
input.title = "Toggle Selection";
//Append new elements to div
var text = document.createTextNode(newSkill);
label.appendChild(text);
label.appendChild(input);
div.appendChild(label);
//Append div to original skillSet
skillSet.appendChild(div);

输出

<div>
  <label>This is a new skill
    <input type="checkbox" name="skill[]" title="Toggle Selection">
  </label>
</div>

Answer 3

InnerHTML 将“导致所有子元素的破坏，即使您尝试追加”。 raam86 和 Rotem Harel 的两个解决方案都应该对您有所帮助，因为您应该使用 appendChild 方法来解决这个问题。

See this answer