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">[=11=]</p>
</div>

而且我不知道该怎么做。我也试过 js 但没用。

所以我想做的是，当用户选中一个框（每个复选框在数据库中都有一个价格）时，class="number"文本必须实时增加数字。

$service->price 是复选框价格的名称。

Answer 1

我建议将价格放在一个跨度内，这样您就可以 select 它 class 并执行加法操作，例如：

$(':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">[=11=]</p>
</div>

Answer 2

$('.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>

Laravel 5.6 - 选中框时增加数字

Laravel 5.6 - Increase number when box is checked

javascript

php

laravel

laravel-5.6