的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」方法會覆蓋選中複選框

回答

相關問題