javascript - 将多个输入价格合并为一个 TOTAL

Question

因此，脚本以初始值 $8.90 开始，其想法是根据所选选项添加额外费用，HTML 分为 3 个部分 1.check-boxes、2 .选择并3.输入(文本)。

每个部分都是独立工作的，我正在尝试找到一种方法来组合所有 3 个部分，以便 TOTAL 可以根据所选选项显示最终结果。

LIVE EXAMPLE

JQUERY:

$(document).ready( function() {

<!-- COUNTRY OPTIONS SCRIPT -->     
$('#country').on('keyup change', function(e){

        //Changed the following line to get the original value      
        var subt_value = $('#subt0').attr('data-original');

        //Changed this to say, NOT AR and has a choice per the comments.            
        if($(this).val() != 'AR' && $(this).val().length > 0) {
          var add_sub = parseFloat(subt_value)+parseFloat('10.00');
          $('#subt0').text(parseFloat(add_sub).toFixed(2));
        } else {
          //Otherwise put it back to the original value
          $('#subt0').text(subt_value);
        }

}); 
<!-- END COUNTRY OPTIONS SCRIPT --> 

<!-- CHECKBOX OPTIONS SCRIPT --> 
var start_price = parseFloat($('#subt0').attr('data-original'));

    $("#ser1, #ser2").click(function(){
        var amountToAdd = 0.0;
        $("#ser1, #ser2").each(function() {
            if($(this).is(":checked")){
                amountToAdd += parseFloat($(this).attr('data-price'));
            }
        });
        $('#subt0').text(parseFloat(amountToAdd+start_price).toFixed(2));
   });              
<!-- END CHECKBOX OPTIONS SCRIPT -->    

<!-- INPUT OPTIONS SCRIPT --> 
$(".opts").click(function() {
    var amountToAdd = 0.0;
    $(this).each(function() {
        $("#map_sector").val($(this).attr('data-price'));
        amountToAdd += parseFloat($(this).attr('data-price'));
    });     
    $('#subt0').text(parseFloat(amountToAdd+start_price).toFixed(2));
});
<!-- END INPUT OPTIONS SCRIPT --> 

});

HTML:

<input name="service1" type="checkbox" id="ser1" data-price="1" value="1" title="Service 1" />
<input name="service2" type="checkbox" id="ser2" data-price="5" value="1" title="Service 2" />

<select id="country">
  <option value="AR">Argentina</option>
  <option value="US">USA</option>
  <option value="BR">Brasil</option>
  <option value="CU">Cuba</option>
</select> 

<input name="map_sector" type="text" id="map_sector" value="5" readonly>

<label class="opts" data-price="1">Option #1</label>
<label class="opts" data-price="5">Option #2</label>
<label class="opts" data-price="8">Option #3</label>
<div>TOTAL: <label id="subt0" data-original="8.90">8.90</label></div>

寻找此结果:

如果选择了 2 个复选框:14.90 美元 + 选项(美国)选择:10.00 美元 + 选项#2 选择:5.00 美元:总计: 29.90 美元

Answer 1

我将使用 AJAX 将表单“提交”到 PHP 脚本，该脚本将计算价格并返回结果。您使用 AJAX 来阻止默认提交，然后将表单 POST 到 PHP 页面。使用 isset() 检查不同的选项，并根据 isset() 或 POST 变量的值修改变量，然后在 PHP 末尾回显该变量。

编辑:忽略第一部分。

这应该适用于选择和复选框，我不确定您如何处理标签。

<script>
    //ASSIGN CLASSES TO EACH TYPE OF INPUT I.E. <input name="service1" type="checkbox" class="serviceCheckbox" id="ser1" data-price="1" value="1" title="Service 1" />
    //ALSO ASSIGN data-price TO SELECT ELEMENTS ( even if it is 0 )
    window.originalCost = 8.90; //window is how you explicitly assign global variables.
    window.cost = originalCost;

    $( document ).on( 'click', '.serviceCheckbox', function()
    {
        var thisCost = $( this ).attr( 'data-price' );

        if ( $( this ).prop( 'selected' ) == true )
        {
            addCost( thisCost );    
        }
        else 
        {
            subractCost( thisCost );    
        }
    });

    $( document ).ready( function()
    {
        var previousCost;
        var currentCost;

        $( document ).on( 'focus', '#country', function()
        {
            previousCost = $( this ).attr( 'data-price' );
        });

        $( document ).on( 'change', '#country', function()
        {
            currentCost = $( this ).attr( 'data-price' );

            var priceChange = currentCost*1 - previousCost*1;

            if ( priceChange > 0 )
            {
                addCost( priceChange ); 
            }
            else
            {
                subtractCost( priceChange );    
            }
        });     
    });

    function addCost( cost )
    {
        var currentCost = window.cost;
        var finalCost;

        cost = parseFloat( cost );

        finalCost = window.cost*1 + cost*1;

        window.cost = finalCost;
    }

    function subractCost( cost )
    {
        var currentCost = window.cost;
        var finalCost;

        cost = parseFloat( cost );

        finalCost = window.cost*1 - cost*1;

        window.cost = finalCost;
    }
</script>

然后您必须将 window.cost 变量转换为标签的文本。让我知道这是否有效(可能需要微调)，但我相信逻辑是合理的。