将多个输入价格合并为一个 TOTAL答案

【问题标题】：Combine multiple input prices to one TOTAL将多个输入价格合并为一个 TOTAL
【发布时间】：2014-08-03 04:05:02
【问题描述】：

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

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

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 + Option#2 选中：$5.00：总计： 29.90 美元

【问题讨论】：

为什么不让事情保持一致并添加数据价格来选择选项。如果不是那么好，输入字段对价格是否有任何影响。您所需要的只是在您的标签中选择并检查所有数据价格项目，然后按照您的操作进行 parseFloat。我还建议创建一个名为 CalculateTotal() 的函数，该函数应读取所有选定等项的值。在每次点击或选择的事件中，只需调用此函数。
问题在于，即使您已经添加了其他成本，您仍在将成本添加到原始值上。例如，如果您选择“美国”，您不想将 10.00 添加到原始 8.90 上，而是要将其添加到当前值。那么技巧就变成了，如果您更改选择，则必须在添加新选择的值之前删除旧选择添加的值。
我没有在选择选项中添加数据价格，因为除了 AR 之外，所有选项的价格都相同

标签： javascript php jquery select checkbox

【解决方案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 变量转换为标签的文本。让我知道这是否可行（可能需要稍作调整），但我相信逻辑是合理的。

【讨论】：

但是当用户取消选中一个复选框时怎么办？ php如何知道要减去什么值
我的回答是假设您在用户完成选择选项并希望查看最终成本时计算价格。
不，我按照你的建议使用 PHP 但在下一页，但我需要在当前页面中实时计算这些值。

【解决方案2】：

我会将逻辑分为两部分，以使事情易于管理和理解。参与价格更新的元素都会有 data-price 所以我们可以把它捡起来单击时的元素只会在所有选定元素上放置一个类，如果需要，从需要切换的其他元素中删除类。计算价格的单个函数。请看这个 http://jsfiddle.net/farrukhsubhani/Q2XVw/2/

function CalculateTotalPrice() {
var totalPrice = 0.0;
$(".priceitem").each(function(){
    totalPrice += parseFloat($(this).attr("data-price"));
});
$("#subt0").html("$" + totalPrice);
}

我已经更改了您的 html 和 js 以使其正常工作。

【讨论】：