Список предметов индивидуально с ярлыками

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

Вы имеете в виду что-то подобное?

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 2

Простой способ сделать это:

1. сначала добавить какой-либо тег в метку.
2. добавить значение в новый тег при проверке флажка.

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>

Answer 3

Я включил ниже простое решение.

      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>