使用标签单独列出项目答案

【问题标题】：List Items individually with labels使用标签单独列出项目
【发布时间】：2018-11-24 13:18:12
【问题描述】：

下午好，

我希望为网站创建一个当前选择的小型选项元素，当涉及到与 JS 相关的任何内容时，我都是相当新的。如何调整下面的代码以在它们自己的 <label> 标记之间单独列出所选项目？

function checkCount(elm) {
      var checkboxes = document.getElementsByClassName("checkbox-btn");
      var selected = [];
      for (var i = 0; i < checkboxes.length; ++i) {
        if(checkboxes[i].checked){
            selected.push(checkboxes[i].value);
        }
        }
      document.getElementById("proId").value = selected.join();
      document.getElementById("total").innerHTML = selected.length;
    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>
    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>
    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>

    <input type="text" name="proId" id="proId">

<div>Total Selected : <span id="total">0</span></div>

【问题讨论】：

如何调整下面的代码以在它们自己的标签之间单独列出所选项目....需要更多说明....
对不起，这有点含糊:) 因此，虽然目前选定的项目列在一个输入框中，但 id 喜欢它们分别列在自己的“div”标签之间
Div 或标签标签？我更新了您的问题以显示不可见的标签标签

标签： javascript forms checkbox

【解决方案1】：

我在下面提供了一个简单的解决方案。

      const listEl = document.getElementById('selected-value-list')
      let html = ''
      selected.forEach(item => {
        html += `<li>${item}</li>`
      })
      listEl.innerHTML = html

像 vue.js 这样的现代工具可以非常优雅地处理这类事情，所以如果你打算做更复杂的事情，我强烈建议你研究一下。

function checkCount(elm) {
      var checkboxes = document.getElementsByClassName("checkbox-btn");
      var selected = [];
      for (var i = 0; i < checkboxes.length; ++i) {
        if(checkboxes[i].checked){
            selected.push(checkboxes[i].value);
        }
        }
      document.getElementById("proId").value = selected.join();
      document.getElementById("total").innerHTML = selected.length;

      const listEl = document.getElementById('selected-value-list')
      let html = ''
      selected.forEach(item => {
        html += `<li>${item}</li>`
      })
      listEl.innerHTML = html


    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>
    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='asdasd' onchange='checkCount();'></label>
    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='bbbbb' onchange='checkCount();'></label>

    <input type="text" name="proId" id="proId">

<div>Total Selected : <span id="total">0</span></div>
<div>Selected Values:</div>
<ul id="selected-value-list">
 
</ul>

【讨论】：

您列出的是索引，而不是值
那太好了。感谢您的快速回答和对 vue.js 的提醒，我会看看它。 :)
另外在访问数组的时候不建议使用for..in
哦，是的，很抱歉它正在输出索引，可以根据值进行调整:)
它实际上并没有包含在 div 中 - 除非您使用 Babel，否则此代码与 IE 不兼容

【解决方案2】：

一个简单的方法是：

首先在标签中添加一些标签。
checkbok 选中时在新标签上添加值。

function checkCount(elm) {
  var checkboxes = document.getElementsByClassName("checkbox-btn");
  var selected = [];


  if (elm.checked) {
    elm.nextElementSibling.innerText = elm.value;
  } else {
    elm.nextElementSibling.innerText = '';
  }

  for (var i = 0; i < checkboxes.length; ++i) {
    if (checkboxes[i].checked) {
      selected.push(checkboxes[i].value);
    }
  }


  document.getElementById("proId").value = selected.join();
  document.getElementById("total").innerHTML = selected.length;
}

<label class='checkbox-inline'>
    <input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount(this);'>
    <span></span>
    </label>

<label class='checkbox-inline'>
      <input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount(this);'>
      <span></span>
    </label>

<label class='checkbox-inline'>
      <input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount(this);'>
      <span></span>
    </label>

<input type="text" name="proId" id="proId">

<div>Total Selected : <span id="total">0</span></div>

【讨论】：

这实际上不是在回答问题
据我了解，请参阅我的解决方案答案。 list the selected items individually between their own <label> tags?

【解决方案3】：

你的意思是这样的吗？

function checkCount(elm) {
  var checkboxes = document.getElementsByClassName("checkbox-btn");
  var selected = [];
  for (var i = 0; i < checkboxes.length; ++i) {
    if (checkboxes[i].checked) {
      selected.push(checkboxes[i].value);
    }
  }
  document.getElementById("proId").value = selected.join();
  if (selected.length > 0) {
    document.getElementById("tags").innerHTML = '<label>' +
      (selected.length > 1 ? selected.join('</label><label>') : selected[0]) + '</label>';
  }
  document.getElementById("total").innerHTML=selected.length;
}

#tags&gt;label{ margin:2px; padding:3px; border: 1px solid black; }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>
<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>
<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>

<input type="text" name="proId" id="proId">

<div>Total Selected : <span id="total">0</span></div>
<div id="tags"></div>

【讨论】：