Как модифицировать что бы скрипт не перезаписывал?

Question

[DeniSidorenko]

Предыстория : И за необходимости сделать option для тега с чекбоксом я нашел в интернете другой путь, который с помощью CSS и грамотной разметки позволил сделать похожее на тег select но вместо option у меня checkbox. Это не важно но я прикреплю код что бы вы понимали.

HTML CODE

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select class='sl-search' id='testSelect'>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" class='sl-chb' id="one" value='DC_MMA' />First checkbox</label>
      <label for="two">
        <input type="checkbox" class='sl-chb' id="two" value='Bones'/>Second checkbox</label>
      <label for="three">
        <input type="checkbox" class='sl-chb' id="three" value='Jon Jones' />Third checkbox</label>
    </div>
  </div>
  <div id="text_comment"></div>
</form>

Сделано такое решение что бы было возможно отправлять на сервер данные выбрав несколько вариантов не прибегая к CTRL и тупой функциональности выбора множество option.

Так вот что самое главное, есть Id с text_comment, в которым выводиться выбранная опция из input value. Все прикольно но при выборе одного, он выводится а что бы выводился другой надо этот отключить и тогда другой будет показан. Мне же надо что бы сколько выбрал столько value показались. На данный момент использую такой js скрипт

$( 'input.sl-chb' ).on( 'click', function() {
  $( '#text_comment' ).html( 'Был выбран ' + $( 'input:checked' ).val() );
});

Answer 1

[Stalker_RED]

Готовые решения:
https://select2.github.io/examples.html
https://harvesthq.github.io/chosen/

Или вам туториал написать как объединить несколько строк в одну?

var values  = []
$('.multiselect :checked').each(function(){
  values.push(this.value)
})
$( '#text_comment' ).html('Был выбран '+ values.join(' '))

Comments

[DeniSidorenko]

Нет , вы неправильно поняли. У меня все работает просто при клике .html() перезаписывается каждый раз а мне надо что бы выбранные элементы ( которые несколько) тоже отображились несколько

[Stalker_RED]

DeniSidorenko: https://learn.javascript.ru/operators#сложение-стр...

[DeniSidorenko]

Stalker_RED: Спасибо за решение, по поводу вашего скрипта хотел спросить. Можно ли сделать так что бы при добавление каждый элемнт имел и один элемент не мог повторяться пару раз

[Stalker_RED]

DeniSidorenko: values.filter((e, i, a)=>a.indexOf(elem)===i)