How to add two values of an input by checking checkbox

Question

I’m wondering how do I add two values that are set when I mark the checkbox.

i made this code,It doesn’t work as I expected,I wanted it to take the number that is already in the input and add another value when checking the checkbox,and remove the same amount that was added when unchecking.

$('#booster15p').change(function(){

    if($(this).attr('checked')){
          
          $('#tdmxp').val(10+1.5);
        
          
     }else{
         
          $('#tdmxp').val(11.5-1.5);
          
     } 
});


$('#booster50p').change(function(){

    if($(this).attr('checked')){
          
          $('#tdmxp').val(10+5);
          
          
     }else{
         
          $('#tdmxp').val(15-5);
     
     }
    
    
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="checkbox" name="1.5" id="booster15p"/>Aumenta em 1.5
<input type="checkbox" name="5" id="booster50p"/>Aumenta em 5

<input class="tdmxp" id="tdmxp" value="10" >

Answer 1

Well, you just need to fetch the value of your element and then add/subtract with what you want. Don’t forget to turn the value into a float, because the values of the DOM elements always come as strings.

let tdmxp = $('#tdmxp');
let valorAtual = parseFloat(tdmxp.val());
tdmxp.val(valorAtual + 1.5);

Or you can pass a callback to the val method

$('#tdmxp').val((i, v) => parseFloat(v) + 1.5);   

Answer 2

Each of the functions of change changes the final value of #tdmxp based solely on your checked and starting from the value 10, so you can never have the sum of the two, nor works for another value that is in the <input> other than 10.

In this case it is simpler to combine both functions in one single consideration each checked and a base value of input.

Example:

let valorBase = parseFloat($("#tdmxp").val()); //valor base inicial

$('#booster15p, #booster50p').change(function(){ 
//    ^------------^ mesmo evento change para os dois checkboxes
  let valorFinal = valorBase; //começa no base
  if ($("#booster15p").is(":checked")){ //se o 1.5 ta marcado acrescenta 1.5
    valorFinal += 1.5;
  }
  if ($("#booster50p").is(":checked")){ //se o 5 ta marcado acrescenta 5
    valorFinal += 5;
  }

  $("#tdmxp").val(valorFinal); //coloca o valor final no input
});

$("#tdmxp").change(function(){
  //se o usuario mudar o input, altera o valor base
  valorBase = parseFloat($("#tdmxp").val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="checkbox" name="1.5" id="booster15p"/>Aumenta em 1.5
<input type="checkbox" name="5" id="booster50p"/>Aumenta em 5

<input class="tdmxp" id="tdmxp" value="10" >

As in the example even if the user changes the value of the box the increments will work correctly because the base value for the sums is changed.

Using ternaries you can compress the code a lot, keeping the same idea:

let valorBase = parseFloat($("#tdmxp").val()); 
$('#booster15p, #booster50p').change(function(){ 
  $("#tdmxp").val(valorBase + ($("#booster15p").is(":checked") ? 1.5: 0) + 
    ($("#booster50p").is(":checked") ? 5: 0) );
});

$("#tdmxp").change(function(){
  valorBase = parseFloat($("#tdmxp").val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="checkbox" name="1.5" id="booster15p"/>Aumenta em 1.5
<input type="checkbox" name="5" id="booster50p"/>Aumenta em 5
<input class="tdmxp" id="tdmxp" value="10" >