JS conditional checkbox form

Asked

Viewed 37 times

-1

I have some doubts in Javascript where I need to add conditional when selecting a Checkbox, I don’t even know where to start.
Valos there:
4 checkbox, each with a value (10$, 20$, 30$, 40$).
Conditional are:
If you choose the option of $20 and $40, it will give the value of $60, raise the total value by 5$.
Simplifying that is it.

var total = 0;

function opc01(campo) {
  if (campo.checked)
    total += eval(campo.value);
  else
    total -= eval(campo.value);
  document.sistema.total.value = total;
}

var total = 0;

function opc02(campo) {
  if (campo.checked)
    total += eval(campo.value);
  else
    total -= eval(campo.value);
  document.sistema.total.value = total;
}

var total = 0;

function opc03(campo) {
  if (campo.checked)
    total += eval(campo.value);
  else
    total -= eval(campo.value);
  document.sistema.total.value = total;
}

var total = 0;

function opc04(campo) {
  if (campo.checked)
    total += eval(campo.value);
  else
    total -= eval(campo.value);
  document.sistema.total.value = total;
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <FORM METHOD=POST ACTION="" name="sistema">

    Opção 01<input type="checkbox" name="opc1" value="10" onClick="opc01(this)"></br>
    Opção 02<input type="checkbox" name="opc2" value="20" onClick="opc02(this)"></br>
    Opção 03<input type="checkbox" name="opc3" value="30" onClick="opc03(this)"></br>
    Opção 04<input type="checkbox" name="opc4" value="40" onClick="opc04(this)"><br>

    <input type="text" name="total" value=""></br>
    <input type="text" name="final" value=""></br>

  </FORM>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

`

javascript checkbox
  • 2

    Avoid using eval() your use is discouraged if you want to convert integer strings use parseInt() if you want to convert string to floating point use parseFloat().

  • As for the question: ...If you choose the option of $20 and $40, you will give the value of $60, subtract the total value by 5$.... and if other checkboxes are selected together the behavior is the same?

  • @Augustovasques The intention is to be variable... if user choose the option of 20$ and 40$ decrease 10$, if he choose the option 20$ and 30$, decrease 15$... if he choose three options, decrease 50$....

1 answer

1

Val is extremely unnecessary for your case, and should not be used anywhere.

you do not need a function for each checkbox, if you had 40 checkbox, would rewrite your code 40 times, is not ideal ever.

Perform a single function that traverses each input and detects whether it is marked or not, if it is marked sum and after the conference subtracts 5

function getTotal()
{
  
  // Seleciona todos os checkbox que possuem o atributo class = somaTotal
  let checkBoxes = document.getElementsByClassName("somaTotal");
  
  // Váriavel que será retornada
  let total = 0;
  
  
 // Percorre os objetos selecionados
  Array.prototype.forEach.call(checkBoxes, checkbox => {

    // confere se o obj específico está marcado
    if(checkbox.checked)
    {
      // Recebe o valor do elemento marcado
      let valor = parseInt(checkbox.value);
      
      // Soma o valor ao total
      total += valor;
    }
    
    
  });
  
  // Retorna o valor total subtraindo 5
  console.log(`O total fica em ${total-5}`);
  
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <FORM METHOD=POST ACTION="" name="sistema">

    Opção 01<input type="checkbox" class='somaTotal' name="opc1" value="10" onClick="getTotal()"></br>
    Opção 02<input type="checkbox" class='somaTotal' name="opc2" value="20" onClick="getTotal()"></br>
    Opção 03<input type="checkbox" class='somaTotal' name="opc3" value="30" onClick="getTotal()"></br>
    Opção 04<input type="checkbox" class='somaTotal' name="opc4" value="40" onClick="getTotal()"><br>


  </FORM>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

  • Cool... I made a Function for each checkbox by having to present a condition for each variable... if the teacher chooses option 3 and 4 he has a different calculation, subtracting another value... if you choose option 2 and 3 have another calculation...

  • Then within a single function you will check the checkbox.getattribute('name') of the elements that are marked and store in an array. Then check who are the elements that are in the array and from there decide what will be done or not. I repeat, a function for each checkbox is the wrong way. Note that its functions have exactly the same structure, abstracting is important for better code writing, good practices and performance gain.

Browser other questions tagged javascript checkbox

You are not signed in. Login or sign up in order to post.