jquery - checkbox oncheck total will be updated

I was trying to develop a checkbox using jQuery ..where oncheck total will be updated but when i uncheck it will be back as it is.. Here total updated with oncheck but it don't get back to total amount when i uncheck it .what could be possible error..anyone help please?

$('#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;
  });