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

Posted 2023-05-07

【中文标题】Javascript \'innerHTML\' 方法覆盖复选框选择

【英文标题】：Javascript 'innerHTML' Method Overwriting Checkbox SelectionJavascript 'innerHTML' 方法覆盖复选框选择

【发布时间】：2013-07-14 15:32:20

【问题描述】：

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

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

真是让人头疼。有什么办法可以解决这个问题吗？

【问题讨论】：

如何取消选中？某些方法不会更改底层 html，并且在重绘时您的更改将被丢弃

它是一个复选框，但默认是选中的，总是可以切换的，对吧？

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

@Barmar 的意思是访问容器元素的innerHTML 属性时返回的文本不会包含用户交互引起的属性更新（即“value”、“checked”、 “选择”）。

Is it possible to append to innerHTML without destroying descendants' onclick functions? 的可能重复项

【参考方案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);
    

【参考方案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>

【参考方案3】：

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

See this answer

【讨论】：

好吧，如果innerHTML 的值包含由用户交互更改的属性，那将不是问题。但是，它没有，所以它是:)

是的，您是对的，但我认为您应该真正记下这一点，以免将来遇到此问题。