1

Почему то не записывается сумма чекбоксов в итоговый span. Событие onchange прописал. Но value из чекбоксов записывается только из того, который был выбран, остальные как undefined и следовательно не суммируется друг с другом.

$('input#set_1, input#set_2, input#set_3').change(function() {
  var set_1 = $('input#set_1:checked').val();
  var set_2 = $('input#set_2:checked').val();
  var set_3 = $('input#set_3:checked').val();

  var setup = set_1 + set_2 + set_3;
  $('.setup').html(setup);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>Опция 1</span><input id="set_1" type="checkbox" value="3000">
</div>
<div>
  <span>Опция 2</span><input id="set_1" type="checkbox" value="6000">
</div>
<div>
  <span>Опция 3</span><input id="set_1" type="checkbox" value="1000">
</div>

<p>Результат: <span class="setup">0</span> р.</p>

3 ответа 3

2

Самый простой вариант, поставить всем один класс, а потом через .each собрать и посчитать.

$('input.sum').on('click',function(){
  var sum = 0;

  $('input.sum').each(function (){
    const sumPlus = parseFloat($(this).val());
    if($(this).prop('checked') == true) sum = (sum + sumPlus);
  });

  $('.setup').text(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <span>Опция 1</span><input class="sum" id="set_1" type="checkbox" value="3000">
</div>
<div>
  <span>Опция 2</span><input class="sum" id="set_1" type="checkbox" value="6000">
</div>
<div>
  <span>Опция 3</span><input class="sum" id="set_1" type="checkbox" value="1000">
</div>

<p>Результат: <span class="setup">0</span> р.</p>

1

$('input').change(function() {
  var set_1 = parseInt($('#set_1:checked').val(), 10) || 0;
  var set_2 = parseInt($('#set_2:checked').val(), 10) || 0;
  var set_3 = parseInt($('#set_3:checked').val(), 10) || 0;
  var setup = set_1 + set_2 + set_3;
  $('.setup').html(setup);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span>Опция 1</span><input id="set_1" type="checkbox" value="3000"><br>
<span>Опция 2</span><input id="set_2" type="checkbox" value="6000"><br>
<span>Опция 3</span><input id="set_3" type="checkbox" value="1000"><br>
<p>Результат: <span class="setup">0</span> р.</p>

1

ID в HTML всегда должен быть уникален!

Вот универсальное рабочее решение на jQuery:

$(document).ready(function() {
  var total = 0;
  $('.addition').change(function() {
    if(this.checked) {
      total += parseInt($(this).val());
    } else {
      total -= parseInt($(this).val());
    }
    $('.setup').text(total);
  });
});

HTML:

<div>
  <span>Опция 1</span><input id="set_1" class="addition" type="checkbox" value="3000">
</div>
<div>
  <span>Опция 2</span><input id="set_2" class="addition" type="checkbox" value="6000">
</div>
<div>
  <span>Опция 3</span><input id="set_3" class="addition" type="checkbox" value="1000">
</div>

<p>Результат: <span class="setup">0</span> р.</p>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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