1

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

<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/

2 ответа 2

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="" />

3
  • Спасибо, вроде все как нужно! За пояснения по коду - отдельная благодарность, они всегда являются ценнейшей частью ответа.
    – Amsterdam
    8 дек 2020 в 9:36
  • 1
    @Amsterdam, сегодня утром на свежую голову осознал, что переменную надо объявлять внутри функции, а не снаружи - тогда её не придётся обнулять каждый раз. В общем, подправил код :) 9 дек 2020 в 7:34
  • 1
    спасибо за внимание к деталям!!)
    – Amsterdam
    9 дек 2020 в 7:37
1

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>

2
  • Спасибо, Михайл, ваш вариант верно отрабатывает! Но как ответ принял другой, т.к. там на базе моего кода, и в качестве бонуса есть пояснения)
    – Amsterdam
    8 дек 2020 в 9:38
  • 1
    @Amsterdam да, конечно, я просто привёл пример на нативном JS 8 дек 2020 в 9:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.