Question

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

myForm是：

document.forms[1]

我的addForm是：

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

我的javascript函数addSkill（）是：

<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>

好的，所以我会给你们一个场景：使用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; } }，我已经向myForm添加了5个复选框项，当然默认情况下都会检查所有5个复选项，因为复选框“已选中”属性。但我决定取消选中其中的3个。在此之后，我添加另一个复选框项。一旦我这样做，我的所有复选项都会自动检查。所以我以前的选择都消失了！

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

真是令人头痛。有没有解决这个问题的方法或方法？

Answer 1

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

See this answer

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

您可以使用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);
    }
}

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

3 个答案: