Есть ли в JS / jquery аккуратный способ разделения отмеченных флажков?

Question

Я работаю над методом, целью которого является получение элементов из формы, чтобы ее можно было предварительно просмотреть перед отправкой. В настоящее время я застрял в проблеме, где я пытаюсь получить метки из отмеченных флажков и отделить их. Получить метки не проблема, но найти аккуратный способ разделить их с помощью «(|)». Я знаю, что добавление массива, возможно, решило бы мою проблему, но я искал альтернативный способ сделать это в JS / Jquery, просто добавив встроенный метод или аналогичный.

JS и Jquery для того, что у меня сейчас есть:

function previewForm() {
const previewPlace = document.getElementById('previewPlace');
let getPlaceChecked = $(':checkbox[name=placeCheckbox]:checked');

if (getPlaceChecked.next('label').text() === "") {
        previewPlace.innerHTML = 'No place chosen.'
    } else {
        previewPlace.innerHTML = getPlaceChecked.next('label').text();
    }
}

HTML (фактическая форма):

<div class="custom-checkbox custom-checkbox-padding custom-control">
   <input class="custom-control-input" id="norway" name="placeCheckbox" type="checkbox" value="Norway">
   <label class="custom-control-label" for="norway">Norway</label>
</div>
<div class="custom-checkbox custom-checkbox-padding custom-control">
   <input class="custom-control-input" id="sweden" name="placeCheckbox" type="checkbox" value="Sweden">
   <label class="custom-control-label" for="sweden">Sweden</label>
</div>

HTML (превью):

<p class="media-description" id="previewPlace"></p>

До сих пор я пытался просто добавить пробел, как показано ниже. Я также попытался добавить, но это не сработало так, как я думал.

previewPlace.innerHTML = getPlaceChecked.next('label').text() + " | ";

Редактировать: опечатка в операторе if

Редактировать1: сделать быструю скрипку к лучшему продемонстрировать мою проблему https://jsfiddle.net/d1nryuqg/

Edit2: внесены изменения в 'HTML (фактическая форма)', чтобы лучше соответствовать jsfiddle ..

Answer 1

Когда вы используете .text() в коллекции (из более чем одного элемента), она объединяет все значения в одну строку - нет лучшего способа их разделить.

Вместо этого вы можете использовать jquery .map, чтобы получить массив строк для каждой метки, затем .join для их разделения:

previewPlace.innerHTML = getPlaceChecked.next("label").map((i,e)=>e.innerText).toArray().join(", ")

Обновленная скрипта: https://jsfiddle.net/6p1h853t/