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').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>

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-选中复选框时增加数字

2 个答案: