带标签分别列出项目

Question

下午好，

我正在寻找为网站创建一个当前选定的小型选项元素，涉及到与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>

Answer 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>

Answer 2

您的意思是这样的吗？

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>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>

Answer 3

一个简单的方法是：

1. 首先在标签中添加一些标签。
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>