Javascript опция и расчет стоимости радио стоимости

Question

Имеются переключатели и опция множественного выбора. Есть цены в их разделе значения данных. Например: data-value = "3.10" . То, что я хочу сделать, это. Для печати суммы чисел выбранных данных на экране. Я надеюсь, что смогу сказать.

Два варианта дают разные итоговые цены. Я хочу сложить их вместе.

  $(document).ready(function() {   

    var price = 10.09;
    var net_fiyat=0;
    $('input[type=radio]').on('click',function(){
      data= $(this).data('price');
      net_fiyat = (parseFloat(price) + parseFloat(data));
      console.log(price,data);
      console.log(net_fiyat);
      $('#total').text(net_fiyat);
      

    });

    $(".ekstra").change(function(event) {
      var total = 0;

      $(".ekstra").select().find(":selected").each(function() {
        console.log(this,price);
        total += parseFloat($(this).data("price"));
      });

      if (total == 0) {
        $('#total').html('');
      } else {
       var net_fiyat2 = price + total;  
       console.log('net2');
       $('#total').html(net_fiyat2.toFixed(2));
     }

   });
  }); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
          <div class="container">
            <div class="row">
              <div class="col-md-12 pd-40">
               <select multiple data-placeholder="Ekstra Malzeme Seçin.." class="ekstra">
                <option data-price="1.10">Pizza Sos</option>
                <option data-price="1.10">Beyaz Peynir</option>
                <option data-price="1.10">Mozarella Peyniri</option>
                <option data-price="1.10">Sucuk</option>
                <option data-price="1.10">Sosis</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <input class="radio-button" type="radio" name="radio" data-price="5.12" />
      <input class="radio-button" type="radio" name="radio" data-price="6.50" />


      <span class="font-size-27 font-weight-bolds ml-1" id="total">$10.09</span>

Answer 1

Вы можете иметь переменную для расчета всех выбранных Экстрасов и переменную для выбранной радиостанции. Затем создайте функцию, которая печатает итоговый результат.

Запустите фрагмент кода

$(document).ready(function() {   

  var price = 0;
  var ekstras = 0;

  $('input[type=radio]').on('click',function(){
    price = parseFloat($(this).data('price'));

    printTotal();
  });

  $(".ekstra").change(function(event) {
    ekstras = 0;

    $(".ekstra").find(":selected").each(function() {
      ekstras += parseFloat($(this).data("price"));
    });

    printTotal();
  });
  
  // Function to print the total
  function printTotal() {
    var total = ekstras + price;
      
    if (total == 0) {
      $('#total').text('');
    } else {
      var net_fiyat2 = price + total;    
      $('#total').text(total.toFixed(2));
    }
  }
 
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js"></script>

<div class="col-md-12">
  <div class="container">
    <div class="row">
      <div class="col-md-12 pd-40">
        <select multiple data-placeholder="Ekstra Malzeme Seçin.." class="ekstra">
          <option data-price="1.10">Pizza Sos</option>
          <option data-price="1.10">Beyaz Peynir</option>
          <option data-price="1.10">Mozarella Peyniri</option>
          <option data-price="1.10">Sucuk</option>
          <option data-price="1.10">Sosis</option>
        </select>
      </div>
    </div>
  </div>
</div>
<input class="radio-button" type="radio" name="radio" data-price="5.12" />
<input class="radio-button" type="radio" name="radio" data-price="6.50" />

<div>
  <span class="font-size-27 font-weight-bolds ml-1" id="total"></span>
</div>