Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The easiest way I can see to do this is:</p> <ul> <li>Set your base price as a variable in JavaScript</li> <li>Call a function when a checkbox is checked or unchecked</li> <li>Add or subtract the value of the check box from the base price</li> </ul> <p>I added two things to your example code. First, for each checkbox I added an onchange function we'll call update(). Second, I gave "Total" an id of total.</p> <p>HTML:</p> <pre><code>Piecemaker - &lt;input name="piecemaker" type="checkbox" value="20" onchange="update(this);"&gt; &lt;br&gt; Network Bar - &lt;input name="netbar" type="checkbox" value="15" onchange="update(this);"&gt; &lt;br&gt; 10 Tags - &lt;input name="tags" type="checkbox" value="5" onchange="update(this);"&gt; &lt;br&gt; Shopping System - &lt;input name="shop" type="checkbox" value="20" onchange="update(this);"&gt; &lt;br&gt; &lt;br&gt; Total: &lt;input id='total' name="total" type="text" value="$150" readonly&gt; </code></pre> <p>The JavaScript is pretty straight forward. Set a base price (running_total), and either add or subtract the value of the checkbox from running_total.</p> <p>JavaScript:</p> <pre><code>var running_total = 150; function update(feature) { // Check if(feature.checked == true){ // Add value to running_total running_total += parseInt(feature.value); document.getElementById('total').value = '$' + running_total; } // Uncheck if(feature.checked == false){ // Subtract value from running_total running_total -= parseInt(feature.value); document.getElementById('total').value = '$' + running_total; } } </code></pre> <p>Here's a link to a working example on jsfiddle.net: <a href="http://jsfiddle.net/dnA7q/1/" rel="nofollow">http://jsfiddle.net/dnA7q/1/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload