title: Function triggers when checkbox is checked, but clears when unchecked
body: <p>Here is a simple calculation that is run when a checkbox is checked:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function calculate() {
     var guests = document.getElementById("guests").value;
     var drinkRate = 2;
     var drinkCost = drinkRate * guests;
  
     //output
     document.getElementById("drinkPrice").value = '$' + 
     parseFloat(drinkCost).toFixed(2);
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Number of guests: 
  &lt;input type="number" name="guests" id="guests" value="4"&gt;&lt;br&gt;
  Drinks&lt;input type="checkbox" name="drinks" id="A" onchange="calculate()"&gt;&lt;output id="drinkPrice"&gt;&lt;/output&gt;&lt;br&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can the calculation be cleared (or hidden) when the check box is unchecked?</p>
  
  <p>Thanks</p>