的Javascript“的innerHTML”方法会覆盖选中复选框

我有一个表格，id="myForm"或document.forms[0]，使用复选框输入，我用的Javascript函数的帮助和另一个HTML表单，id="addForm"或document.forms[1]，其中有一个文本框动态地编写和一个可点击的按钮。的Javascript“的innerHTML”方法会覆盖选中复选框

的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，我已经添加了5个复选框项目myForm，所有5个当然默认选中，因为复选框“checked”属性。但我决定取消其中的3个。在此之后，我添加另一个复选框项目。只要我这样做，我的所有以前的复选框项目会自动检查。所以我以前的选择全部消失了！

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

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

来源

2013-07-16 bhatGautam

如何取消选中？有些方法不会更改底层html，并且在重做更改时被丢弃 – raam86

这是一个复选框，但默认情况下会进行检查，您可以随时切换它，对吗？ – bhatGautam

'.innerHTML'不包含用户输入，它只是DOM源。您应该创建节点并将其附加到DOM，而不是追加到'.innerHTML'。 – Barmar

您可以使用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-16 12:54:30

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

See this answer

来源

2013-07-16 12:47:13

那么，如果'innerHTML'的值包含用户交互改变的属性，那就不成问题了。然而，它不是，所以它是:) – Pointy

是的你是对的，但我想这是你应该真的记下来，以便你将来不会遇到这个问题。 –

添加一个节点，而不是使用的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-16 12:52:42 raam86

的Javascript“的innerHTML”方法会覆盖选中复选框

回答

相关问题