Javascript 选项和单选价值价格计算

Question

有单选按钮和多选选项。他们的数据价值部分有价格。例如：数据值 = "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 和一个用于无线电选择价格的变量。然后创建一个打印总结果的函数。运行代码片段$(document).ready(function() {&nbsp; &nbsp;&nbsp; var price = 0;&nbsp; var ekstras = 0;&nbsp; $('input[type=radio]').on('click',function(){&nbsp; &nbsp; price = parseFloat($(this).data('price'));&nbsp; &nbsp; printTotal();&nbsp; });&nbsp; $(".ekstra").change(function(event) {&nbsp; &nbsp; ekstras = 0;&nbsp; &nbsp; $(".ekstra").find(":selected").each(function() {&nbsp; &nbsp; &nbsp; ekstras += parseFloat($(this).data("price"));&nbsp; &nbsp; });&nbsp; &nbsp; printTotal();&nbsp; });&nbsp;&nbsp;&nbsp; // Function to print the total&nbsp; function printTotal() {&nbsp; &nbsp; var total = ekstras + price;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if (total == 0) {&nbsp; &nbsp; &nbsp; $('#total').text('');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; var net_fiyat2 = price + total;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; $('#total').text(total.toFixed(2));&nbsp; &nbsp; }&nbsp; }&nbsp;});<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">&nbsp; <div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="col-md-12 pd-40">&nbsp; &nbsp; &nbsp; &nbsp; <select multiple data-placeholder="Ekstra Malzeme Seçin.." class="ekstra">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option data-price="1.10">Pizza Sos</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option data-price="1.10">Beyaz Peynir</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option data-price="1.10">Mozarella Peyniri</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option data-price="1.10">Sucuk</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option data-price="1.10">Sosis</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </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>&nbsp; <span class="font-size-27 font-weight-bolds ml-1" id="total"></span></div>