Javascript 期权和单选值(value)价格计算

Question

有单选按钮和多选选项。他们的数据值(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

您可以使用一个变量来计算所有选定的 Ekstras，并使用一个变量来计算 radio 选定的价格。然后创建一个打印总结果的函数。

运行代码片段

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