1

I have a form, id="myForm" or document.forms[0], with checkbox inputs, which I am writing dynamically with the help of Javascript functions and another HTML form, id="addForm" or document.forms[1], which has a text box and a clickable button.

The myForm is:

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

My addForm is:

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

and my javascript function addSkill() is:

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

All right, so I'll give you guys a scenario: Using addForm, i've added 5 checkbox items to myForm, all 5 are checked by default of course, because of the checkbox "checked" attribute. But i decide to uncheck 3 of them. After this, I add another checkbox item. As soon as i do that, ALL of my previous checkbox items get checked automatically. So my previous selection has all vanished!

I know this definitely has something to do with the "checked" attribute and also innerHTML that I am using.

It's been a real headache. Is there any fix or way around this problem?

4

3 回答 3

0

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

看到这个答案

于 2013-07-16T12:47:13.387 回答
0

添加一个节点而不是使用 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>
于 2013-07-16T12:52:42.267 回答
0

您可以通过使用 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);
    }
}
于 2013-07-16T12:54:30.303 回答