Function triggers when checkbox is checked, but clears when unchecked

Question

Here is a simple calculation that is run when a checkbox is checked:

function calculate() {
   var guests = document.getElementById("guests").value;
   var drinkRate = 2;
   var drinkCost = drinkRate * guests;

   //output
   document.getElementById("drinkPrice").value = '$' + 
   parseFloat(drinkCost).toFixed(2);
};

Number of guests: 
<input type="number" name="guests" id="guests" value="4"><br>
Drinks<input type="checkbox" name="drinks" id="A" onchange="calculate()"><output id="drinkPrice"></output><br>

How can the calculation be cleared (or hidden) when the check box is unchecked?

Thanks

You can check the state of a checkbox through its `checked` property : `document.getElementById('A').checked` — Seblor, Sep 20 '18 at 14:36

Prashant Pimpale · Accepted Answer · 2018-09-21T05:05:05.090

You can use the checked property of checkbox to identify the checkbox is checked or unchecked. The demo with your Code as:

function calculate() {

 if (document.getElementById("A").checked) {
  var guests = document.getElementById("guests").value;
  var drinkRate = 2;
  var drinkCost = drinkRate * guests;

  //output
  document.getElementById("drinkPrice").value = '$' +
   parseFloat(drinkCost).toFixed(2);
 } else {
  document.getElementById("drinkPrice").value = "";
 }

};

Number of guests: 
<input type="number" name="guests" id="guests" value="4">
<br>
Drinks: 
<input type="checkbox" name="drinks" id="A" onchange="calculate()">

<output id="drinkPrice"></output><br>

This answer make more sense because you should not be doing calculation at all if checkbox is unchecked. @Prashant - Good to format code before posting. — Nikhil Vartak, Sep 20 '18 at 14:47

score 1 · Answer 2 · edited Sep 21 '18 at 12:00

1

I would highly suggest you do not use the onchange event, use the onclick instead, for compatibility reasons best explained by @T.J. Crowder on this question

Simply change the onchange="calculate(this)" inside the checkbox tag to:

<input type='checkbox' onclick='calculate(this);'>

edited Sep 21 '18 at 12:00

Prashant Pimpale

10,349
9
44
84

answered Sep 20 '18 at 14:55

Marco Cornejo

38
5

score 0 · Answer 3 · edited Sep 21 '18 at 05:41

0

You have to check if the checkbox check value is true. Try this.

function calculate() {
 if (!document.getElementById("A").checked) {
  document.getElementById("drinkPrice").value = "";
 } else {
  var guests = document.getElementById("guests").value;
  var drinkRate = 2;
  var drinkCost = drinkRate * guests;
  document.getElementById("drinkPrice").value = '$' + parseFloat(drinkCost).toFixed(2);
 }

};

 Number of guests: 
<input type="number" name="guests" id="guests" value="4"><br>
Drinks<input type="checkbox" name="drinks" id="A" onchange="calculate()"><output id="drinkPrice"></output><br>

edited Sep 21 '18 at 05:41

Prashant Pimpale

10,349
9
44
84

answered Sep 20 '18 at 14:41

urree K

13
6

You could greatly improve your answer by explaining your reasoning behind your solution, and how you actually did it. Also you could use a ternary operation to simplify the assignment. – Seblor Sep 20 '18 at 14:42

V. Sambor · Answer 4 · 2018-09-20T15:32:05.433

Check the checkbox current state and reset the value if the state is false.

function calculate() {
   var guests = document.getElementById("guests").value;
   var drinkRate = 2;
   var drinkCost = drinkRate * guests;

   //output
   document.getElementById("drinkPrice").value = '$' + 
   parseFloat(drinkCost).toFixed(2);

   if(!document.getElementById('A').checked) {
        document.getElementById("drinkPrice").value = ""
   }
};

Number of guests: 
<input type="number" name="guests" id="guests" value="4"><br>
Drinks<input type="checkbox" name="drinks" id="A" onchange="calculate()"><output id="drinkPrice"></output><br>

Function triggers when checkbox is checked, but clears when unchecked

4 Answers4