javascript - 附加到父级，显示所有复选框值

Question

我有一些复选框，一旦您选中其中一些并单击一个按钮，当我尝试显示它的多个值(标签 vals)时，我需要在一个跨度(动态创建)中显示它们，只有最后一个正在显示。我想在控制台中输出类似的东西。

请找到引用代码的 fiddle 链接

let spanTopic =  document.createElement('span');
var topicSelected = document.getElementById('topicCheckContainer').getElementsByTagName('input');
for( let i=0 ; i<topicSelected.length;i++){
    if(topicSelected[i].checked){
        var myValueofTopic = topicSelected[i].parentNode.getElementsByTagName("LABEL")[i].innerHTML;
        console.log(myValueofTopic);
        spanTopic.innerHTML = "Observation Topic Selected : " + myValueofTopic;   
    }
}

https://jsfiddle.net/karantewari/acomtxbg/

选中多个复选框并单击按钮，您可以看到只显示最后一个，而在控制台中我可以看到其他代码。

提前致谢。

Answer 1

问题是每次 for 表达式循环时，您都会更改 span 的值。它会导致您在每个循环中删除先前的值。

您可以在控制台中看到您检查了输入中的所有文本，但不在同一行，这意味着每一行都引用一个控制台日志。您希望将所有内容都放在同一条线上。

要解决这个问题，只需在innerHTML赋值前加上“+”即可:

spanTopic.innerHTML += "Observation Topic Selected : " + myValueofTopic;

"+="是一种将值连接到现有值的简写方式，但您也可以编写 x = x + y