Всем привет! Как можно сделать, чтобы значения которые выбрал пользователь отображались друг под другом возле поля "Вы выбрали:". В данный момент они все выводятся в 1 строку. "
" не помогает
<figure>
<pre>
<div class="Prokrutka">
<label class="box-label"><input type="checkbox" id="op1" onchange="Options()" data-num="Сборный груз"> Сборный груз</label><br>
<label class="box-label"><input type="checkbox" id="op2" onchange="Options()" data-num="Негабаритный груз"> Негабаритный груз</label><br>
<label class="box-label"><input type="checkbox" id="op3" onchange="Options()" data-num="Контейнерные перевозки"> Контейнерные перевозки</label><br>
<label class="box-label"><input type="checkbox" id="op4" onchange="Options()" data-num="Опасные грузы"> Опасные грузы</label><br>
<label class="box-label"><input type="checkbox" id="op5" onchange="Options()" data-num="Перевозка фурой"> Перевозка фурой</label><br>
<label class="box-label"><input type="checkbox" id="op6" onchange="Options()" data-num="Междугородние переезды"> Междугородние переезды</label><br>
<label class="box-label"><input type="checkbox" id="op7" onchange="Options()" data-num="Экспресс-доставка"> Экспресс-доставка</label><br>
<label class="box-label"><input type="checkbox" id="op8" onchange="Options()" data-num="Авиаперевозка"> Авиаперевозка</label><br>
</div>
<button id="CompleteButtonOption" onclick="Complete()">Подтвердить</button>
</pre>
</figure>
<p id="outOptions">Вы выбрали:</p>
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(',')}`;
});
});