Function triggers when checkbox is checked, but clears when unchecked

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