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 个复选框项，当然，由于复选框“checked”属性，默认情况下所有 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);
    }
}