Question

因此脚本以初始值$8.90开头，并且想法是根据所选的选项添加额外的费用，HTML除以3个部分1.check-boxes，2。选择和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 +选项＃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变量翻译成标签的文本。让我知道这是否有效（可能需要稍微调整），但我相信逻辑是合理的。

Answer 2

我将逻辑分为两部分，以使事情易于管理和易于理解。价格更新中涉及的元素都有数据价格，所以我们可以拿起它点击上的元素只会在所有选定的元素上放置一个类，如果需要，可以从需要切换的其他元素中删除类。单一功能来计算价格。请看这个 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以使事情有效。

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

2 个答案: