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
– Seblor, Commented Sep 20, 2018 at 14:36

Prashant Pimpale · Accepted Answer · 2018-09-21 05:05:05Z

4

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>

edited Sep 21, 2018 at 5:05

answered Sep 20, 2018 at 14:45

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikhil Vartak Over a year ago

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.

Prashant Pimpale · Accepted Answer · 2018-09-21 12:00:18Z

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, 2018 at 12:00

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Sep 20, 2018 at 14:55

Marco Cornejo

385 bronze badges

Comments

V. Sambor · Accepted Answer · 2018-09-20 15:32:05Z

0

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>

edited Sep 20, 2018 at 15:32

answered Sep 20, 2018 at 14:42

V. Sambor

13.4k6 gold badges51 silver badges68 bronze badges

Comments

Prashant Pimpale · Accepted Answer · 2018-09-21 05:41:22Z

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, 2018 at 5:41

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Sep 20, 2018 at 14:41

urree K

136 bronze badges

1 Comment

Seblor Over a year ago

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.

Collectives™ on Stack Overflow

Function triggers when checkbox is checked, but clears when unchecked

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related