Как вывести поля выбранных checked около "Вы выбрали?"

Question

 <figure>
    <pre>
  <div class="Prokrutka">
    <label class="box-label"><input type="checkbox" id="op1" onchange="Options11()"> Сборный груз</label><br>
    <label class="box-label"><input type="checkbox" id="op2" onchange="Options12()"> Негабаритный груз</label><br>
    <label class="box-label"><input type="checkbox" id="op3" onchange="Options13()"> Контейнерные перевозки</label><br>
    <label class="box-label"><input type="checkbox" id="op4" onchange="Options14()"> Опасные грузы</label><br>
    <label class="box-label"><input type="checkbox" id="op5" onchange="Options15()"> Перевозка фурой</label><br>
    <label class="box-label"><input type="checkbox" id="op6" onchange="Options16()"> Междугородние переезды</label><br>
    <label class="box-label"><input type="checkbox" id="op7" onchange="Options17()"> Экспресс-доставка</label><br>
    <label class="box-label"><input type="checkbox" id="op8" onchange="Options18()"> Авиаперевозка</label><br>
    <label class="box-label"><input type="checkbox" id="op9" onchange="Options19()"> Доставка документов</label><br>
    <label class="box-label"><input type="checkbox" id="op10" onchange="Options20()"> Ответственное хранение</label><br>
    <label class="box-label"><input type="checkbox" id="op11" onchange="Options21()"> Кросс-докинг</label><br>
    <label class="box-label"><input type="checkbox" id="op12" onchange="Options22()"> Доставка для супермаркетов</label><br>
    <label class="box-label"><input type="checkbox" id="op13" onchange="Options23()"> Доставка для интернет-магазинов</label><br>
    <label class="box-label"><input type="checkbox" id="op14" onchange="Options24()"> Выделенный транспорт</label><br>
    <label class="box-label"><input type="checkbox" id="op15" onchange="Options25()"> 3PL</label><br>
    <label class="box-label"><input type="checkbox" id="op16" onchange="Options26()"> Железнодорожные перевозки</label><br>
    <label class="box-label"><input type="checkbox" id="op17" onchange="Options127()"> Автоперевозки по России</label><br>
    <label class="box-label"><input type="checkbox" id="op18" onchange="Options28()"> Таможенное оформление</label><br>
    <label class="box-label"><input type="checkbox" id="op13" onchange="Options29()"> Морские перевозки</label><br>
    <label class="box-label"><input type="checkbox" id="op14" onchange="Options30()"> Рефрижераторные перевозки</label><br>
    <label class="box-label"><input type="checkbox" id="op15" onchange="Options31()"> Экспедирование</label><br>
    <label class="box-label"><input type="checkbox" id="op16" onchange="Options32()"> Региональные перевозки</label><br>
    <label class="box-label"><input type="checkbox" id="op17" onchange="Options33()"> Экспресс-доставка почтовыми вагонами</label><br>
    <label class="box-label"><input type="checkbox" id="op18" onchange="Options34()"> От двери до двери</label>
  </div>
  <button id="CompleteButtonOption" onclick="Complete()">Подтвердить</button>
</pre>
</figure>
<p id="outOptions">Вы выбрали:</p>

Answer 1

Вот такое решение с помощью JavaScript и CSS:

document.querySelectorAll('input[type="checkbox"]').forEach(elem => {
  elem.addEventListener('click', ev => {
    ev.target.classList.toggle('checked');
  });
});

input {
  display: block;
  position: relative;
}

.checked::after {
  content: "Выбрано";
  position: absolute;
  left: 15px;
}

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

_{^{(мне пришлось слегка упростить html для более легкого восприятия примера)}}

Вот как можно вывести список всех выбранных элементов:

let checked = [];

document.querySelectorAll('input[type="checkbox"]').forEach(elem => {
  elem.addEventListener('click', ev => {
    const num = ev.target.dataset.num;
    if (checked.includes(num)) {
      const indexOfNum = checked.indexOf(num);
      if (indexOfNum > -1) {
        checked.splice(indexOfNum, 1);
      }
    } else {
      checked.push(num);
    }

    const p = document.querySelector('p');
    p.textContent = `Вы выбрали: ${checked.join(', ')}`;
  });
});

<input type="checkbox" data-num="1">
<input type="checkbox" data-num="2">
<input type="checkbox" data-num="3">
<input type="checkbox" data-num="4">

<p>Вы выбрали:</p>

Answer 2

 function check() {
   var checkboxes = document.getElementsByName("interest");
   var checkboxesChecked = [];
   for (var i = 0; i < checkboxes.length; i++) {
     if (checkboxes[i].checked) {
       checkboxesChecked.push(checkboxes[i].value);
     }
   }
   document.getElementById("outOptions").innerHTML = "You choosed: " + checkboxesChecked;
 }

html {
  font-family: sans-serif;
}

form {
  width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

fieldset {
  background: cyan;
  border: 5px solid blue;
}

legend {
  padding: 10px;
  background: blue;
  color: cyan;
}

 <form>
   <fieldset>
     <legend>Choose your interests</legend>
     <div>
       <input type="checkbox" id="coding" name="interest" value="coding" />
       <label for="coding">Coding</label>
     </div>
     <div>
       <input type="checkbox" id="music" name="interest" value="music" />
       <label for="music">Music</label>
     </div>
     <div>
       <input type="checkbox" id="art" name="interest" value="art" />
       <label for="art">Art</label>
     </div>
     <div>
       <input type="checkbox" id="sports" name="interest" value="sports" />
       <label for="sports">Sports</label>
     </div>
     <div>
       <input type="checkbox" id="cooking" name="interest" value="cooking" />
       <label for="cooking">Cooking</label>
     </div>
     <div>
       <button type="button" onclick="check()">Check</button>
       <p id="outOptions">You choosed:</p>
     </div>
   </fieldset>
 </form>

БЛОГ НА HUSL

Как вывести поля выбранных checked около "Вы выбрали?"

Ответы (2 шт):