2012-07-27 5 views
0

일부 제품의 단가 + 세금 및 부분 합계를 계산 한 다음 합계를 계산하기위한 간단한 jquery 함수가 있습니다. jquery를 사용하여 실시간으로 목록 상자의 사용자 선택에 따라 다른 세율에 대한 세금 수입을 보여 드리고자합니다. 나는 2 가지 제품을위한 기초적인 방법을 찾았지만, 3 가지 또는 많은 방법에 대해, 나의 방법은 효과가 없다 : 나를 도와주세요? ; jquery - 목록 상자 선택 사항을 실시간으로 가로 채고, 계산하고 표시합니다.

이)

내 코드입니다 : 데모 [여기]입니다 http://jsfiddle.net/skipperit/px9tb/8/

<script type='text/javascript'> 
$(function(){ 
$('#q1,#pu1,#tax1,#tax2,#q2,#pu2').change(function() { 
var q1 = parseFloat($('#q1').val(), 10); 
var qval1 = 0; 
if (q1 > 0) { 
    qval1 = q1; 
} 
var q2 = parseFloat($('#q2').val(), 10); 
var qval2 = 0; 
if (q2 > 0) { 
    qval2 = q2; 
} 


var pu1 = parseFloat($('#pu1').val(), 10); 
var puval1 = 0; 
if (pu1 > 0) { 
    puval1 = pu1; 
} 

var pu2 = parseFloat($('#pu2').val(), 10); 

var puval2 = 0; 
if (pu2 > 0) { 
    puval2 = pu2; 
} 

var subtot1 = 0; 
subtot1 = parseFloat(qval1 * puval1); 
var subtot2 = 0; 
subtot2 = parseFloat(qval2 * puval2); 
var subtot = 0; 
subtot = subtot1 + subtot2; 
var tax1 = parseFloat($('#tax1').val(), 10); 
var tax2 = parseFloat($('#tax2').val(), 10); 
var ivaprice1 = 0; 
var ivaprice2 = 0; 
if (tax1 > 0) { 

    ivaprice1 = subtot1 * tax1/100; 
} 
if (tax2 > 0) { 

    ivaprice2 = subtot2 * tax2/100; 
} 
var ivaprice = 0; 
ivaprice = parseFloat(ivaprice1 + ivaprice2); 
var ivatext = ""; 
ivatext = "tax "; 

$('#total').html(parseFloat(subtot + ivaprice).toFixed(2)); 
$('#tasse').html(parseFloat(ivaprice).toFixed(2)); 
$('#imp').html(parseFloat(subtot).toFixed(2)); 
$('#subtot1b').html(parseFloat(subtot1).toFixed(2)); 
$('#subtot2b').html(parseFloat(subtot2).toFixed(2)); 

if (tax2 == tax1) { 
    $('#taxw').html(parseInt(tax1)); 
    $('#taxtxt2').html(''); 
    $('#taxw2').html(''); 
    $('#taxv').html(parseFloat(ivaprice).toFixed(2)); 
    $('#taxv2').html(''); 
    $('#taxtxt2b').html(''); 
} 
else 
{ 
    $('#taxw').html(parseInt(tax1)); 
    $('#taxw2').html(parseInt(tax2)); 
    $('#taxtxt2').html('tax'); 
    $('#taxtxt2b').html('%:'); 
    $('#taxv').html(parseFloat(ivaprice1).toFixed(2)); 
    $('#taxv2').html(parseFloat(ivaprice2).toFixed(2)); 
} 

}); 
}); 

</script> 


</head> 
<body> 
<p>q1 : 
<input id="q1" value="0"/> 

pu1 : 
<input id="pu1" value="0"/> 
tax1: 
<select name="tax1" id="tax1"> 
<option value="4">4</option> 
<option value="21">21</option> 
<option value="16">16</option> 
</select> 
</p> 
<p>q2 : 
<input id="q2" value="0"/> 
pu2 : 
<input id="pu2" value="0"/> 
tax2 : 
<select name="tax2" id="tax2"> 
<option value="4">4</option> 
<option value="21">21</option> 
<option value="16">16</option> 
</select> 
<br> 
<br>subtot1: <span id="subtot1b"></span><br> 
subtot2: <span id="subtot2b"></span><br> 
tax <span id="taxw"></span>%: <span id="taxv"></span><br> 
<span id="taxtxt2"></span> <span id="taxw2"></span><span id="taxtxt2b"></span> <span id="taxv2"></span><br> 

taxable: €<span id="imp"></span><br> 
Tax: €<span id="tasse"></span><br> 
Total price : €<span id="total"></span></p> 
</body> 
+0

TKS 보정;) – user1558177

답변

0

DEMO HERE

HTML :

​<div id="uguu" data-row="5"></div>​​​​​​​​​​​​​​​​​​​​​​​​ 

JS : 대한

$(function() { 
    (function($) { 
     $.fn.extend({ 
      autobotTransform: function() { 
       return this.each(function() { 
        // variables 
        var _this = $(this); 
        var prodCount = _this.attr("data-row"); 
        var _opt = '<option value="4">4</option><option value="21">21</option><option value="16">16</option>'; 

        // set-up 
        for (i = 1; i <= prodCount; i++) { 
         _this.append('<p class="priceRow">q' + i + ' :<input id="q' + i + '" value="0" />' + 
            'pu' + i + ' :<input id="pu' + i + '" value="0" />' + 
            'tax' + i + ':<select name="tax' + i + '" id="tax' + i + '">' + 
            _opt + '</select>' 
            ); 
        } 
        for (i = 1; i <= prodCount; i++) { 
         _this.append('subtot' + i + ': <span id="subtot' + i +'"></span> ' + 
            'tax <span id="taxw' + i + '"></span>%: <span id="taxv' + 
            i + '"></span><br>' 
            ); 
        } 
        $("input, select", _this).on("change", function() { 
         $('p.priceRow').each(function(index) { 
          var __this = $(this); 
          var i = index + 1; 
          $("#subtot" + i).html(
           ((($("#q" + i).val() > 0) ? parseFloat($("#q" + i).val(), 10) : 0.00) 
           * (($("#pu" + i).val() > 0) ? parseFloat($("#pu" + i).val(), 10) : 0.00)).toFixed(2) 
          ); 
          $("#taxw" + i).html($("#tax" + i).val()); 
          $("#taxv" + i).html(($("#subtot" + i).html() * $("#tax" + i).val() * 0.01).toFixed(2)); 
         }); 
        }).trigger("change"); 
       }); 
      } 
     }); 
    })(jQuery); 

    $("#uguu").autobotTransform();​ 
}); 
+0

안녕하세요 @ 케이 매우 유용하고 흥미로운 솔루션 : 정확히 내가하고 싶은 것은 아니지만 내 욕망에 매우 가깝습니다. 환상적인 코드! 나는 단지 같은 속도로 세금을 실시간으로 추가하는 루틴을 만들어야한다. – user1558177

0

너무 많은 이해가 안 너무 많은 변수 이름과 거기에가는 거기로 이것은 완전한 대답하지 않습니다 . 바라건대 그것은 약간의 사용이 될 것입니다.

1 단계 : 변경 될 때 재 계산을 트리거해야하는 모든 필드에 클래스를 추가하십시오. 이것은 그들 모두를위한 하나의 jQuery 선택을 할 수있게된다 예 :

<input id="q1" value="0" class="change-trigger" /> 

$('.change-trigger').change(function() { ... }); 

2 단계 : 당신이 변화에 모든 것을 다시 계산해야 할 것 같다로서, 관련 필드의 값을 객체로 읽어 들여 배열에 객체를 저장하려고 시도 할 수 있습니다 (위의 핸들러 함수 내에서) :

var allValues = []; 
$('.change-trigger').each(function(idx) // do something with all .change-trigger elements 
{ 
    var values = {}; 
    values.q = Math.max(0, parseFloat($('#q' + idx).val(), 10)); 
    values.pu = Math.max(0, parseFloat($('#pu' + idx).val(), 10)); 
    values.tax = Math.max(0, parseFloat($('#tax' + idx).val(), 10)); 
    values.pretaxtotal = values.q * values.pu; 
    values.taxtotal = (values.pretaxtotal * values.tax)/100; 
    values.linetotal = values.pretaxtotal + values.taxtotal; 

    allValues[idx] = values; 
} 

// later calculations using a loop over the allValues array, e.g. 
var taxBandTotals = [], lowTax = 100.0, highTax = 0.0, taxIndex; 
for (var i = 0; i < allValues.length; i+=1) 
{ 
    // sum up each tax band by adding to index [tax%] in array 
    if (allValues[i].tax > 0) 
    { 
     lowTax = Math.min(lowTax, allValues[i].tax); 
     highTax = Math.max(highTax, allValues[i].tax); 
     taxIndex = parseInt(allValues[i].tax, 10); 

     // initialise to 0 

     if (taxBandTotals[taxIndex] === undefined) 
     { taxBandTotals[taxIndex] = 0; } 

     // add this entry's tax to the right slot 
     taxBandTotals[taxIndex] += allValues[i].taxtotal; 

    } 

    // aggregate values into totals etc. 
    // could play with loop variable to look ahead/behind for 
    // comparison with other tax values? 
} 

for (var j = parseInt(lowTax, 10); j <= parseInt(highTax, 10); j+=1) 
{ 
    if (taxBandTotals[j] !== undefined) 
    { 
     // this is a total for tax % "j" 
    } 
} 

3 단계 : CDATA 물건을 제거, 그것은 더 이상 필요가 없습니다 :

+0

안녕하세요, Matt, 귀하의 조언에 많은 감사와 나는 얽힌 질문에 대한 미안 해요 : 그들은 또한 미래에 대한 유용한 팁입니다 : 이제 코드는 더 깨끗하고 프로입니다. 유일한 것은 .. 세금 표시 금액을 요율로 나눈 값으로 표시하지 않겠다는 루틴이 필요하다는 것입니다 .. 데모를 추가합니다 .. 목록 상자의 값을 변경하면 어떻게 될까요? 서로 동등하지 않거나 ... 감사합니다 – user1558177

+0

아, 네가 말하는 것을 볼 수있다. 각 행에 대해 화폐 세금 값을 받으면 각 백분율 그룹의 세금 총액을 계산할 수 있습니다. 추가 답변을 편집했습니다. 도움이되기를 바랍니다. –