我有一些复选框,一旦您选中其中一些并单击一个按钮,当我尝试显示它的多个值(标签 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/
选中多个复选框并单击按钮,您可以看到只显示最后一个,而在控制台中我可以看到其他代码。
提前致谢。
最佳答案
问题是每次 for 表达式循环时,您都会更改 span 的值。它会导致您在每个循环中删除先前的值。
您可以在控制台中看到您检查了输入中的所有文本,但不在同一行,这意味着每一行都引用一个控制台日志。您希望将所有内容都放在同一条线上。
要解决这个问题,只需在innerHTML赋值前加上“+”即可:
spanTopic.innerHTML += "Observation Topic Selected : " + myValueofTopic;
"+="是一种将值连接到现有值的简写方式,但您也可以编写 x = x + y
关于javascript - 附加到父级,显示所有复选框值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53759936/