如何计算增值税 复选框后我得到total_sum

Question

我尝试使用 jQuery 对我的输入求和。它正确显示

$(document).on("change", "#price", function() {
    var sum = 0;
    $("input[id *= 'price']").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

但我想添加一些功能 如果我点击复选框 如何计算增值税和如果我输入<input type="number" name="discount">我如何从总数中折扣

这是我的网页

<input type="text" name="price[]" id="price" class="form-control" value="10" />
<input type="text" name="price[]" id="price" class="form-control" value="20" />
<input type="text" class="total" value="" />

这是我想要添加的功能

1）复选框计算增值税7%

2）文本框计算折扣，例如类型20，总计= - 20

3）文本框以百分比计算折扣

<input id="vat" type="checkbox"  value="7" name="vat" class="vat">
<input type="text" class="form-control" name="discount"> 
<input type="text" class="form-control" name="discount_percent">

更新这是我的新JavaScript

我尝试制作一个变量 a 来计算总和，但我得到错误的输出，例如我的总和 = 100 并且我输入 50% 折扣 它应该显示 50，但不知道为什么它显示 75

<script>
  var total = $('.total'),
  discount = $('#discount'),
  percentage = $('#discount_percent')
  var perct = percentage.val();
  a = total.val() * (perct) / 100;

function calculate() {
  var sum = 0;
  $("input[id *= 'price']").each(function() {
    sum += +$(this).val();
  });
   total.val((sum - (discount.val())-a).toFixed(2));
}
calculate();

$(document).ready(function () {
  percentage.keyup(function () {
        var perct = percentage.val();
         a = total.val() * (perct) / 100;
         console.log(a);
         calculate();
     });
 });

$(document).on("change keyup", "input", function() {
  if ($('#vat').prop('checked')) {
    discount.val(total.val() * 0.07);
  }else {
    discount.val('');
  }
  calculate();
  $(document).on("change keyup", "input", function() {
      calculate();
    });
});
</script>

Answer 1

这是我的解决方案版本。您可能需要进行一些单元测试并进行更正，但从我所看到的情况来看，它可以工作，请检查一下，如果遇到问题，请告诉我您是否在实现时遇到问题。

总结：

1. 将计算函数移到事件之外，并向其中添加了折扣计算逻辑。

2. 由于您正在使用复选框，因此最好监视两个事件，即change（用于复选框）和keyup（用于输入框）

3. 我添加了一个逻辑，用于在切换复选框时填充折扣输入，它在调用计算函数的位置上方！

var total = $('.total'),
  discount = $('#discount'),
  percentage = $('#discount_percent')
function calculate() {
  var sum = 0;
  $("input.price").each(function() {
    sum += +$(this).val();
  });
  
  if ($('#vat').prop('checked')) {
    discount.attr('disabled', false);
    percentage.attr('disabled', false);
    //keep the below three line if you want to keep default value when there is no value present. This needs to be tweaked!
    //if(!percentage.val()){
    //  percentage.val('7');
    //};
    var perct = percentage.val() || 0;
    //to fixed is used to round to 2 decimal places here
    discount.val((parseFloat(total.val()) * (parseFloat(perct) / 100)).toFixed(2));
  } else {
    discount.attr('disabled', true);
    percentage.attr('disabled', true);
    discount.val('');
    percentage.val('');
  }
  
  total.val((sum - (discount.val())).toFixed(2));
}
calculate();
$(document).on("change keyup", "input", function() {
  calculate();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label for="">Items</label>
  <br>
  <input type="text" name="price[]" class="price" class="form-control" value="10" />
  <br>
  <input type="text" name="price[]" class="price" class="form-control" value="20" />
  <br>
</div>
<div>
  <label for="">Vat</label>
  <input id="vat" type="checkbox" value="7" name="vat" class="vat">
  <label for="">Discount Value</label>
  <input type="text" class="form-control" id="discount">
  <label for="">Discount %</label>
  <input type="text" class="form-control" id="discount_percent">
</div>
<div>
  <label for="">Total</label>
  <input type="text" class="total" value="" />
</div>