How to sum two values of an input by checking checkbox

Question

How to sum two values of an input by checking checkbox

Navigation

#1 by (6 votes)
#2 by (1 votes)

3

I'm wondering how do I add two values that are set when I frame the checkbox.

I made this code, It does not work as I expected, I wanted it to take the number that is already in the input and add another value when marking 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><inputtype="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" >

javascript html jquery

asked by anonymous 26.10.2018 / 00:56

2 answers

6

Well, you just need to fetch the value of your element and then add / subtract with what you want. Do not forget to turn the value into a float because the values of 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);

26.10.2018 / 01:18

Ternary operator in PHP gives unexpected result Increase numbers to ID name

score 1 · Accepted Answer

Each of the change functions changes the final value of #tdmxp only based on its checked and starting with the value 10 , so it can never have the sum of the two, nor does it work for another value that is in <input> other than 10 .

In this case it is simpler to combine both functions in a single recital individually 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><inputtype="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><inputtype="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" >