通过复选框+选择列表计算总价

Question

i want to calculate the total price from select list + checkboxes

this code showing the price of selected element from the list "tvs":

<script type="text/javascript">
 $(document).ready(function () {
var cheap = false;
$('#tvs').change(function () {
    var price = parseFloat($('.total').data('base-price')) || 0;
    $('#tvs').each(function (i, el) {
        price += parseFloat($('option:selected', el).data(cheap ? 'cheap' : 'price'));
        console.log('x', price)
        $('.total').val(price.toFixed(2) + '' + '$');
       });
       });
        });
</script>



 <input placeholder="0.00$" style=" width: 65px; border: 0px;" class="total" data-base-price="0" readOnly>

and this code showing the price of checked checkboxes:

      <script type="text/javascript">
      function update_amounts_modal() {
var sum = 0.0;
$('form').each(function () {
    var qty = $(this).find('.qty').val();
    var price = $(this).find('.price').val();
    var isChecked = $(this).find('.idRow').prop("checked");
    if (isChecked){
        qty = parseInt(qty, 10) || 0;
        price = parseFloat(price) || 0;
        var amount = (qty * price);
        sum += amount;
    }
});
$('.total-modal').text(sum.toFixed(2) + ' ' + '$');


    $().ready(function () {
update_amounts_modal();
$('form .qty, form .idRow').change(function () {
    update_amounts_modal();
    });
     });
 </script>


<div id="subusers" class="total-modal">0.00 $</div>

Answer 1

Hey @musa94 I assume you have a fairly large application and you separate your code into files and what to find a way to sum up two values from different chunks of code. A easy way without changing too much of your existing code is to define a shared data object that holds the values that you want to handle through out your application. You can sum the value from the list and checkbox up by accessing the values in the data object.

// define a data object that exists in your application
window.__ =  window.__ || { data: { total: 0, modal: 0 } };

$(document).ready(function () {
  var cheap = false;

  $('#tvs').change(function () {
    var total = getTvsTotal(cheap);
    // update your view
    $('.total').val(total.toFixed(2) + '' + '$');
    // update your data object
    __.data.total = total;
    console.log('review data object', __);
  });
});

$(document).ready(function () {
  $('form .qty, form .idRow').change(function () {
    var total = update_amounts_modal();
    $('.total-modal').text(total.toFixed(2) + ' ' + '$');

    __.data.modal = total;
    console.log('review data object', __);
  });
});

/**
 * calculate your tvs total
 * @param {boolean}
 * @return {number}
 */
function getTvsTotal(cheap) {
  var price = parseFloat($('.total').data('base-price')) || 0;

  $('#tvs').each(function (i, el) {
      price += parseFloat($('option:selected', el).data(cheap ? 'cheap' : 'price'));
      console.log('list total:', price);      
  });

  return price;
}

/**
 * calculate your amounts modal
 * @return {number}
 */
function update_amounts_modal() {
  var sum = 0.0;

  $('form').each(function () {
    var qty = $(this).find('.qty').val();
    var price = $(this).find('.price').val();
    var isChecked = $(this).find('.idRow').prop("checked");
    var amount;

    if (isChecked){
      qty = parseInt(qty, 10) || 0;
      price = parseFloat(price) || 0;
      amount = qty * price;
      sum += amount;
    }
    console.log('sum:', sum);
  });

  return sum;
}