Note: I'm using the Calculation Plugin: http://plugins.jquery.com/project/calc
Feel free to have me rearrange the html code to help with the javascript code!
Code: Select all
$(document).ready(function(){
// bind the recalc function to the quantity fields
$("input[@name^=option-1]").bind("change", recalc);
// run the calculation function now
recalc();
});
function recalc(){
$("#totalCost span#currentCost").calc(
// the equation to use for the calculation
"cur + price",
// define the variables used in the equation, these can be a jQuery object
{
cur: $("#totalCost span#currentCost"),
price: $("input[@id^=option-price-]")
},
// define the formatting callback, the results of the calculation are passed to this function
function (s){
// return the number as a dollar amount
return "$" + s.toFixed(2);
},
// define the finish callback, this runs after the calculation has been complete
function ($this){
// sum the total of the $("[@id^=total_item]") selector
var sum = $this.sum();
$("#totalCost span#currentCost").text(
// round the results to 2 digits
"$" + sum.toFixed(2)
);
}
);
}
Code: Select all
<div class="contentWizard">
<div>
<div id="option-price-1" class='hiddencontent'>25</div>
<input id="option-1" type="checkbox"/>
<label for="option-1">Wall mount enclosure 16"x16"x8" <span class='optionCost'>Cost: $25</span></label>
</div>
(...)
<div>
<div id="option-price-23" class='hiddencontent'>60</div>
<input id="option-23" type="checkbox"/>
<label for="option-23">Some Random Option I Don't Know off the top of my head <span class='optionCost'>Cost: $60</span></label>
</div>
</div>
<div id="rightsideWizard">
<div id='totalCost'>Total: <span id='currentCost'>1550</span></div>
</div>