Как считать данные с checkbox и поместить в div?

Question

[Рома]

Есть калькулятор на сайте, фото ниже
В разделе коммуникации есть 3 чекбокса, чекнутый чекбокс должен попадать в область калькулятора (панель "калькулятор" справа). Хотелось бы, чтоб они попадали по порядку нажатия, т. е. если первую нажали на канализацию, а второй чеканил воду, то в итоговом списке должна появится сначала канализация а потом вода, разделенные запятыми. Если не выбрано ничего, должно быть написано "нет"
P.S. У чекбоксов заданы data- атрибуты, вдруг важно.

Answer 1

[Mikhail Osher]

plnkr.co/edit/rEDxs0cUsrIaepXCloMJ?p=preview

// Code goes here

jQuery(function ($) {
  var $checkbox = $(':checkbox');
  var $result = $('#result');
  var selected = [];
  
  $checkbox.on('change', function () {
    var $this = $(this);
    var isChecked = $this.is(':checked');
    var value = $this.data('value');
    
    console.log(isChecked, value);
    
    if (isChecked) {
      selected.push(value);
    } else {
      selected.splice(
        selected.indexOf(value),
        1
      );
    }
    
    setResult();
  });
  
  function setResult() {
    $result.html(selected.join(', ') || 'Nothing');
  }
  
  setResult();
});

Answer 2

[Алексей Чипига]

Чтобы по порядку шло, нужно .append() использовать.
Через if($('.checkbox_1').val() == true) {
// И попробовать вставить тот же чекбокс куда вам надо
$('.kuda_nuzno').append($('.checkbox_1'));
}

За код не ручаюсь, но саму идею, надеюсь, передал.

Answer 3

[Александр Таратин]

https://jsfiddle.net/QW01_01/4zghwruy/

<label><input type="checkbox" name="t" value="Газ"/>Газ</label>
<label><input type="checkbox" name="t" value="Вода"/>Вода</label>
<label><input type="checkbox" name="t" value="Канализация"/>Канализация</label>
<div id="res"></div>

var res = $('#res')[0];
$('input[name="t"]').change(function(){
    var h = $.trim(res.innerHTML.replace(this.value, '').replace(/\s+/, ' '));
    if(this.checked){
    	h+= ' '+this.value;
    }
    res.innerHTML = h;
})