Question

我有一张注册表，您可以在其中选择不同的项目，并且它们的价格应该合计并输入Price。唯一无法正常工作的是计算。

如果选择1复选框，则它会加起来，但是再添加1时，它不会计算。我不确定我是否正确使用了toFixed()。有人知道问题出在哪里吗？预先感谢。

另一件事是 当您选中一个复选框时，应使用带有该ID的Extraoption Slelect。可以，但是需要进行所有选择。我不确定为什么会这样，因为我在“ id_number”后面加上“ extraoptions”，如果有人可以帮助我，那将不胜感激！

<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()。

话虽这么说，您可以做一些事情来改进代码。首先，不要使用动态id，当然也不要使用字符串操作将它们切成薄片以拉出所需的部分，或者将元素彼此关联。为此，请使用通用类和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

计算复选框总价

1 个答案: