javascript - jquery - 复选框 oncheck 总计将更新

Question

我试图使用 jQuery 开发一个复选框。其中 oncheck 总计将被更新，但当我取消选中时，它将恢复原样。此处总计已使用 oncheck 更新，但当我取消选中时，它不会返回到总计金额。取消选中它。可能出现什么错误...有人可以帮忙吗？

$('#vat').on('click',function(e){
    var vat = document.getElementById("vat").value;
    var total = document.getElementById("total").value;

    var sum = +total + +vat;
     document.getElementById("total").value =  sum;
  });

Answer 1

假设#vat是您的输入ID

1- 对于单选和复选框输入，您需要使用 change 而不是 click

2-使用this.checked检查是否已选中

$('#vat').on('change',function(e){
    var sum = 0;
    var vat = document.getElementById("vat").value;
    var total = document.getElementById("total").value;
    if(this.checked === true){
       sum = total + vat;
    }else{
       sum = total - vat;
    }   
     document.getElementById("total").value =  sum;
  });

当您使用并标记 jquery 时

   $('#vat').on('change',function(e){
        var sum = 0;
        var vat = parseInt($(this).val());
        var total = parseInt($("#total").val());
        if(this.checked === true){
           sum = total + vat;
        }else{
           sum = total - vat;
        }   
         $("#total").val(sum);
    });