Javascript 如何在我得到总金额后使用复选框计算增值税

Javascript 如何在我得到总金额后使用复选框计算增值税,javascript,jquery,Javascript,Jquery,我尝试使用jQuery对输入进行求和。它显示正确 $(document).on("change", "#price", function() { var sum = 0; $("input[id *= 'price']").each(function(){ sum += +$(this).val(); }); $(".total").val(sum); }); 但我想添加一些功能,如果我点击复选框如何计算增值税 如果我输入,我如何从总额中折扣

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

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

    $(".total").val(sum);
});
但我想添加一些功能,如果我点击复选框如何计算增值税 如果我输入
,我如何从总额中折扣

这是我的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)文本框计算折扣,例如类型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>

变量总计=$('.total'),
折扣=$(“#折扣”),
百分比=$(“折扣率”)
var perct=percentage.val();
a=总计.val()*(perct)/100;
函数计算(){
var总和=0;
$(“输入[id*='price'])。每个(函数(){
sum+=+$(this.val();
});
总计.val((总和-(折扣.val())-a).toFixed(2));
}
计算();
$(文档).ready(函数(){
百分比键控(函数(){
var perct=percentage.val();
a=总计.val()*(perct)/100;
控制台日志(a);
计算();
});
});
$(文档).on(“更改键控”,“输入”,函数(){
如果($('#vat').prop('checked')){
折扣.val(总计.val()*0.07);
}否则{
贴现价值(“”);
}
计算();
$(文档).on(“更改键控”,“输入”,函数(){
计算();
});
});

这是我的解决方案版本。您可能需要进行一些单元测试并进行更正,但从我所看到的情况来看,它是有效的,请检查它,并让我知道您是否在实现方面遇到了问题

摘要:

  • 将calculate函数移到事件之外,并向其添加了折扣计算逻辑

  • 由于您正在使用复选框,因此最好观察两个事件,即
    change
    (用于复选框)和
    keyup
    (用于输入框)

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

  • var total=$('.total'),
    折扣=$(“#折扣”),
    百分比=$(“折扣率”)
    函数计算(){
    var总和=0;
    $(“input.price”)。每个(函数(){
    sum+=+$(this.val();
    });
    如果($('#vat').prop('checked')){
    折扣.attr('disabled',false);
    百分比.attr('disabled',false);
    //如果你想在没有值的情况下保留默认值,请保留下面三行。这需要调整!
    //如果(!percentage.val()){
    //百分比。val('7');
    //};
    var perct=percentage.val()| | 0;
    //to fixed在此处用于四舍五入到小数点后2位
    折扣.val((parseFloat(total.val())*(parseFloat(perct)/100)).toFixed(2));
    }否则{
    折扣.attr('disabled',true);
    百分比.attr('disabled',true);
    贴现价值(“”);
    百分比。val(“”);
    }
    总计.val((总和-(折扣.val()).toFixed(2));
    }
    计算();
    $(文档).on(“更改键控”,“输入”,函数(){
    计算();
    });
    
    
    项目
    


    增值税 贴现价值 折扣% 全部的
    这是我的解决方案版本。您可能需要进行一些单元测试并进行更正,但从我所看到的情况来看,它是有效的,请检查它,并让我知道您是否在实现方面遇到了问题

    摘要:

  • 将calculate函数移到事件之外,并向其添加了折扣计算逻辑

  • 由于您正在使用复选框,因此最好观察两个事件,即
    change
    (用于复选框)和
    keyup
    (用于输入框)

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

  • var total=$('.total'),
    折扣=$(“#折扣”),
    百分比=$(“折扣率”)
    函数计算(){
    var总和=0;
    $(“input.price”)。每个(函数(){
    sum+=+$(this.val();
    });
    如果($('#vat').prop('checked')){
    折扣.attr('disabled',false);
    百分比.attr('disabled',false);
    //如果你想在没有值的情况下保留默认值,请保留下面三行。这需要调整!
    //如果(!percentage.val()){
    //百分比。val('7');
    //};
    var perct=percentage.val()| | 0;
    //to fixed在此处用于四舍五入到小数点后2位
    折扣.val((parseFloat(total.val())*(parseFloat(perct)/100)).toFixed(2));
    }否则{
    折扣.attr('disabled',true);
    百分比.attr('disabled',true);
    贴现价值(“”);
    百分比。val(“”);
    }
    总计.val((总和-(折扣.val()).toFixed(2));
    }
    计算();
    $(文档).on(“更改键控”,“输入”,函数(){
    计算();
    });
    
    
    项目
    


    增值税 贴现价值 折扣% 全部的
    这是有效的,但在百分比中,如果我想添加我自己的号码,则折扣。例如,如果我想折扣20,则我检查vat total=27.9。总计应该是7.9,如果我在%中添加mre折扣,它将折扣更多我认为可能我应该制作更多关于折扣权的函数使用更改函数没有两个dom元素可以具有相同的值id@NarenMurali先生,我试着玩弄它,创造新的东西,但是我的输出得到了错误的数据lol i dnt knw为什么我已经更新了我的代码,如果你dnt介意你给我一些建议吗?@user8663822什么测试用例失败了?你的代码是正确的,但我使用相同的公式更改了一些内容,但输出的不是sameit的工作,而是百分比,如果我想添加我自己的数字,则折扣。例如,如果我想折扣值20,则检查vat total=27.9。总数应该是7.9,如果我加上mre D