Need Serious JQuery Help QUICK!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
DaveTheAve
Forum Contributor
Posts: 385
Joined: Tue Oct 03, 2006 2:25 pm
Location: 127.0.0.1
Contact:

Need Serious JQuery Help QUICK!

Post by DaveTheAve »

Heres the deal, I really want to learn JQuery but this project I'm working on just isn't for beginners. Basically I need to know how to make it so when the user checks the checkbox, the total is added to the totalCost; when they uncheck it, it gets subtracted. Below I have posted both my current javascript and the HTML I'm using.

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:&nbsp;<span id='currentCost'>1550</span></div>
</div>
 
PLEASE HELP ME!
User avatar
DaveTheAve
Forum Contributor
Posts: 385
Joined: Tue Oct 03, 2006 2:25 pm
Location: 127.0.0.1
Contact:

Re: Need Serious JQuery Help QUICK!

Post by DaveTheAve »

Perhaps I'm apporaching this from the wrong way... would it be better to approach this from the following standpoint?

Code: Select all

<input type='checkbox' onclick='if(this.checked == false){javascript_subtraction_here}else{javascript_addition_here}' />
Post Reply