Laravel 5.6 - Увеличение числа, когда флажок установлен

Question

Итак, у меня есть этот код:

<div class="col-md-2">
  Services Available
  
  <div class="services">
    @foreach ($service as $service)
      <div class="service">
        <div id="checkboxes">
          <input type="checkbox" class="checkbox" name="rGroup" value="1" id="{{ $service->id }}" />
          <label class="whatever" for="{{ $service->id }}"><p class="serv-text"> {{ $service->service_name }} + ${{ $service->price }} </p></label>

        </div>
      </div>
    @endforeach

  </div>
</div>

<div class="col-md-2">
  Box Price
  <p div class="number">$0</p>
</div>

И я не могу понять, как заставить это работать.Я тоже пробовал с js, но не сработало.

Так что я хочу сделать, когда пользователь устанавливает флажок (каждый флажок имеет цену в базе данных), class="number"текст должен увеличивать число в режиме реального времени.

$service->price - это название цены флажка.

Answer 1

$('.checkbox').change(function() {
  var v = parseInt($('#hidden').val())
  this.checked ? (v+=1) : (v-=1)
  $('#hidden').val(v)
  document.getElementById('num').innerHTML =v;  
  
  // call ajax to update the value in the server
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" name="rGroup" value="1" id="checkbox" />
<input type="hidden" id="hidden" value="0">
<p class="number"> $<span id="num">0 </span></p>

Answer 2

Я предлагаю поместить цену в промежуток, чтобы вы могли выбрать ее по классу и выполнить операцию сложения, например:

$(':checkbox').on('change', function() {
  var number = 0;
  $(':checkbox:checked').each(function() {
    number += parseInt($(this).parent().find('.price').text());
  });
  $('.number').text('$' + number);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-2">
  Services Available

  <div class="services">
    <div class="service">
      <div id="checkboxes">
        <input type="checkbox" class="checkbox" name="rGroup" value="1" id="{{ $service->id }}" />
        <label class="whatever" for="{{ $service->id }}"><p class="serv-text">service_name 1 + $<span class="price">10</span></p></label>
      </div>
    </div>
    <div class="service">
      <div id="checkboxes">
        <input type="checkbox" class="checkbox" name="rGroup" value="1" id="{{ $service->id }}" />
        <label class="whatever" for="{{ $service->id }}"><p class="serv-text">service_name 2 + $<span class="price">20</span></p></label>
      </div>
    </div>

    <div class="service">
      <div id="checkboxes">
        <input type="checkbox" class="checkbox" name="rGroup" value="1" id="{{ $service->id }}" />
        <label class="whatever" for="{{ $service->id }}"><p class="serv-text">service_name 3 + $<span class="price">50</span></p></label>
      </div>
    </div>
  </div>
</div>

<div class="col-md-2">
  Box Price
  <p div class="number">$0</p>
</div>