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">我如何从总数中打折

这是我的HTML

<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）文本框计算折扣ex。 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

这是我的解决方案版本。您可能需要进行一些单元测试并进行更正，但它可以从我看到的内容开始工作，请查看它并告诉我您是否遇到了无法实施的问题。

<强>要点：

将计算功能移到事件之外，并将折扣计算逻辑添加到它。
由于您使用的是复选框，因此最好注意两个事件，即change（对于复选框）和keyup（对于输入框）
我添加了一个逻辑，用于在复选框切换时填充折扣输入，它位于调用calculate函数的位置上方！

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>

我得到total_sum后如何使用Checkbox计算增值税

1 个答案: