Рассчитать общую стоимость при выборе флажка

Question

У меня есть форма регистрации, где вы можете выбрать различные предметы, и их цена должна сложиться и войти в поле ввода Price. Единственное, что не работает должным образом, это вычисления.

Если вы установите 1 флажок, он добавится, но когда вы добавите еще 1, он не рассчитает. Я не уверен, правильно ли я использовал toFixed(). Кто-нибудь знает в чем проблема? Заранее спасибо.

Другое дело: Когда вы устанавливаете флажок, требуется дополнительная выборка с этим идентификатором. это работает, но делает все необходимые выборы. Я не уверен, почему, так как я поставил «id_number» с «экстраопциями». Если кто-нибудь сможет мне помочь, это будет очень признательно!

<label>Price</label>
<input type="text" name="price" id="price" class="form-control price" data-blocked="<>{}" value="{{ ($cache['price'] ?? old('price') ?? $registration->isg_price ?? $distance_price) }}" readonly>

<!-- foreach to get the extra options and the extras, because they come from another table -->
<label>options</label><br>

@foreach($option_array as $option)  
  <div>
    <input type="checkbox" class="option" id="option_{{ $option->exa_id }}" name="option_{{ $option->exa_id }}" value="{{ $option->exa_id }}" {{ isset($cache) ? (isset($cache['option_' . $option->exa_id]) ? 'checked' : '')  : (old() ? (old('option_' . $option->exa_id) ? 'checked' : '') : ($registration ? (in_array($option->exa_id, $registration_options) ? 'checked' : '') : '')) }} >
    <input type="hidden" value="{{ $option->exa_price }}" class="option_price_{{ $option->exa_id }}">
    <label>{{ $option->exa_name }}</label> 
    <label class="exa_price">€{{ $option->exa_price }}</label>  
  </div>
  <select name="extraoptions_{{ $option->exa_id }}" class="form-control extraoptions" id="extraoptions_{{ $option->exa_id }}">
    <option></option>
    @foreach($option->extraoptions as $extraoption)
      <option value="{{ $extraoption->eos_id }}" {{ ($registration ? (in_array($extraoption->eos_id, $registration_options_extra) ? 'selected' : '') : '') }}>{{ $extraoption->eos_name }}</option>
    @endforeach
  </select>
  <br>
@endforeach     

$(document).ready(function() {
  set_options();
  $(".option").change(function() {
    set_options();
  });
});

function set_options() {
  // participant is also a value we have to add up. (this works)
  var total_price = parseFloat($("#participant").val());

  $(".option").each(function() {
    var id = $(this).attr('id'); // we take the id of the options
    var id_number = id.split("_")[1];
    var option_price = parseFloat($(".option_price_" + id_number).val());

    if (this.checked) {
      //the calculation
      total_price = parseFloat(total_price + option_price).toFixed(2);
      $("#extraoptions_" + id_number).attr('required', 'True');
    } else {
      $("#extraoptions_" + id_number).attr('required', 'False');
    }
  });

  parseFloat($("#price").val(total_price)).toFixed(2);
}

Answer 1

Ваша основная проблема заключается в том, что вызов toFixed() для total_price устанавливает его в строку. Поэтому в следующем цикле вы на самом деле объединяете значение в строку вместо , добавляя числовое значение. Чтобы это исправить, вызывайте toFixed() только в том месте, в котором отображается значение в пользовательском интерфейсе.

При этом есть несколько вещей, которые вы можете сделать, чтобы улучшить код. Во-первых, не используйте динамические идентификаторы и, конечно же, не разбивайте их на части, используя манипуляции со строками, чтобы вытащить нужные вам части или связать элементы друг с другом. Для этого вместо этого используйте общие классы и обход DOM, примерно так:

$(document).ready(function() {
  var $options = $(".option").change(function() {
    var total_price = parseFloat($("#participant").val());

    $options.each(function() {
      var option_price = parseFloat($(this).next('.option_price').val());
      $(this).closest('div').next('.extraoptions').prop('required', this.checked);
      if (this.checked)
        total_price += option_price;
    });

    $("#price").val(total_price.toFixed(2));
  }).trigger('change');
});

@foreach($option_array as $option)  
  <div>
    <input type="checkbox" class="option" name="option_{{ $option->exa_id }}" value="{{ $option->exa_id }}" {{ isset($cache) ? (isset($cache['option_' . $option->exa_id]) ? 'checked' : '')  : (old() ? (old('option_' . $option->exa_id) ? 'checked' : '') : ($registration ? (in_array($option->exa_id, $registration_options) ? 'checked' : '') : '')) }} >
    <input type="hidden" value="{{ $option->exa_price }}" class="option_price">
    <label>{{ $option->exa_name }}</label> 
    <label class="exa_price">€{{ $option->exa_price }}</label>  
  </div>
  <select name="extraoptions_{{ $option->exa_id }}" class="form-control extraoptions">
    <option></option>
    @foreach($option->extraoptions as $extraoption)
      <option value="{{ $extraoption->eos_id }}" {{ ($registration ? (in_array($extraoption->eos_id, $registration_options_extra) ? 'selected' : '') : '') }}>{{ $extraoption->eos_name }}</option>
    @endforeach
  </select>
  <br>
@endforeach