Записать множественное значение value

Question

Есть набор чекбоксов

<label><input class="calc" type="checkbox" data-price="дата 1" value="валуе 1">checkbox 1</label><br>
<label><input class="calc" type="checkbox" data-price="дата 2" value="валуе 2">checkbox 2</label><br>
<label><input class="calc" type="checkbox" data-price="дата 3" value="валуе 3">checkbox 3</label>
        
<input name="options[file]" type="" id="file" value="" />

Нужно получить значения data-price у тех чекбоксов, которые будут выбраны, и записать в value input#file. Сейчас скрипт записывает лишь одно значение последнего выбранного чекбокса

$('.calc').on('click', function () {
  $('input:checkbox:checked').each(function() {
    $('#file').val($(this).data('price') + ' ');
  });
});

подскажите, пожалуйста, что подправить https://jsfiddle.net/49mq2rfp/3/

Answer 1

У Вас происходит перезапись значения на каждой итерации цикла each, поэтому остаётся только последнее. Нужна какая-то переменная, в которую будут записываться выбранные значения, и уже её - вне цикла - надо передавать в $('#file').val()

$('.calc').on('click', function () {
  let fileVal = '';
  $('input:checkbox:checked').each(function() {
    fileVal += $(this).data('price') + ' ';
  });
  $('#file').val(fileVal);
  console.log($('#file').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input class="calc" type="checkbox" data-price="дата 1" value="валуе 1">checkbox 1</label><br>
<label><input class="calc" type="checkbox" data-price="дата 2" value="валуе 2">checkbox 2</label><br>
<label><input class="calc" type="checkbox" data-price="дата 3" value="валуе 3">checkbox 3</label>
        
<input name="options[file]" type="hidden" id="file" value="" />

Answer 2

const calcInputs = Array.from(document.querySelectorAll('.calc'));
const fileInput = document.querySelector('#file');

calcInputs.forEach(item => {
  item.addEventListener('change', e => {
    const checkedInputs = calcInputs.slice().filter(item => item.checked);
    const checkedInputsPrice = checkedInputs.map(item => item.getAttribute('data-price'));
    fileInput.value = checkedInputsPrice.join(' ');
  });
});

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

<form>
  <label><input class="calc" type="checkbox" data-price="дата 1" value="валуе 1">checkbox 1</label>
  <label><input class="calc" type="checkbox" data-price="дата 2" value="валуе 2">checkbox 2</label>
  <label><input class="calc" type="checkbox" data-price="дата 3" value="валуе 3">checkbox 3</label>

  <input name="options[file]" type="text" id="file" value="" />
</form>

БЛОГ НА HUSL

Записать множественное значение value

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