Question

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

请找到小提琴链接以获取参考代码

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

Answer 2

您的逻辑几乎不错，..我猜只是一个小小的疏忽。

设置<span>标记的值的部分，需要将新内容附加到旧内容上。相反，您要替换它。因此，问题。只需将=替换为+=就可以了。

我还在每行末尾添加了新行以改善其外观。

Click this link for the working JSFiddle

或查看下面的代码段：

spanTopic.innerHTML += "<br>Observation Topic Selected : " + myValueofTopic; //observe the +=

function myAdditionFrame() {
  let spanTopic = document.getElementById('spanID');
  if (typeof(spanTopic) != 'undefined' && spanTopic != null) {
    spanTopic.innerHTML = ""; //If the span tag is already filled with some previous click action, empty it for the next click.
  } else {
    spanTopic = document.createElement('span');
    spanTopic.setAttribute("id", 'spanID');
  }
  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 + "<br>";
    }
  }
  document.getElementById('obserDetailsComeHere').appendChild(spanTopic);
}

<div class="obserDetailsComeHere" id="obserDetailsComeHere">

</div>
<div class="checkbox-primary" id="topicCheckContainer">
  <input type="checkbox" id="myObserInput"><label for="myObserInput">Topic #1 Lore dolor sit amet.</label><br>
  <input type="checkbox" id="myObserInput1"><label for="myObserInput1">Topic #2 Loresum dolor sit amet.</label><br>
  <input type="checkbox" id="myObserInput2"><label for="myObserInput2">Topic #3 lor sit amet.</label><br>
  <input type="checkbox" id="myObserInput3"><label for="myObserInput3">Topic #4 Lorem ipor sit amet.</label><br>
  <input type="checkbox" id="myObserInput4"><label for="myObserInput4">Topic #5 Loredolor sit amet.</label><br>
</div>
<button onclick="myAdditionFrame()">
                        Click
                        </button>

附加到父项，显示所有复选框值

2 个答案: