jQuery Calculation Plugin - Nutrition Calculator - Add values on click of associated radio button

Question

I'm using the jQuery calculation plugin here: http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

Here is a jsFiddle: http://jsfiddle.net/k3edG/4/

As you can see, I have multiple radio buttons. Alongside the radio buttons, right now - I have spans that sum up all the nutrition data in the totals area.

What I want to do is have the totals of each nutrition item only be calculated when the user selects the related radio button.

I thought about doing onclick events for each individual radio button but I haven't been able to get anywhere yet.

Any thoughts?

$(document).ready(function() {



// get the sum of the elements
var calories = $(".caloriesSum").sum();
var fat = $(".fatSum").sum();
var satfat = $(".satfatSum").sum();
var carbs = $(".carbsSum").sum();
var protein = $(".proteinSum").sum();
var sodium = $(".sodiumSum").sum();
var chloresterol = $(".chloesterolSum").sum();

// update the total
$("#totalCalories").text(+ calories.toString());
$("#totalFat").text(+ fat.toString());
$("#totalSatFat").text(+ satfat.toString());    
$("#totalCarbs").text(+ carbs.toString());
$("#totalProtein").text(+ protein.toString());
$("#totalSodium").text(+ sodium.toString());
$("#totalChloresterol").text(+ chloresterol.toString());


}); 


<h4>Pick Your Meal</h4>

        <ul class="options">
            <li>
                <input type="radio" id="wwheatt" name="meal" value="whole_wheat_tortilla"> Whole Wheat Tortilla
                <span class="caloriesSum">280</span>
                <span class="fatSum">6</span>
                <span class="satfatSum">0</span>
                <span class="carbsSum">44</span>
                <span class="proteinSum">8</span>
                <span class="sodiumSum">340</span>
                <span class="chloesterolSum">0</span>
            </li>
            <li>
                <input type="radio" name="meal" value="flour_tortilla"> Flour Tortilla
                <span class="caloriesSum">290</span>
                <span class="fatSum">6</span>
                <span class="satfatSum">2</span>
                <span class="carbsSum">49</span>
                <span class="proteinSum">9</span>
                <span class="sodiumSum">770</span>
                <span class="chloesterolSum">0</span>
            </li>
            <li>
                <input type="radio" name="meal" value="naked"> Naked, zero nutrients
                <span class="caloriesSum">0</span>
                <span class="fatSum">0</span>
                <span class="satfatSum">0</span>
                <span class="carbsSum">0</span>
                <span class="proteinSum">0</span>
                <span class="sodiumSum">0</span>
                <span class="chloesterolSum">0</span>
            </li>
        </ul>

        <h4>Select Your Protein</h4>

        <ul class="options">
            <li>
                <input type="radio" name="protein" value="steak"> Steak
                <span class="caloriesSum">230</span>
                <span class="fatSum">9</span>
                <span class="satfatSum">3</span>
                <span class="carbsSum">3</span>
                <span class="proteinSum">32</span>
                <span class="sodiumSum">170</span>
                <span class="chloesterolSum">90</span>
            </li>
            <li>
                <input type="radio" name="protein" value="carnitas"> Carnitas
                <span class="caloriesSum">210</span>
                <span class="fatSum">9</span>
                <span class="satfatSum">3</span>
                <span class="carbsSum">2</span>
                <span class="proteinSum">29</span>
                <span class="sodiumSum">490</span>
                <span class="chloesterolSum">90</span>
            </li>
            <li>
                <input type="radio" name="protein" value="chicken"> Chicken
                <span class="caloriesSum">190</span>
                <span class="fatSum">2</span>
                <span class="satfatSum">0</span>
                <span class="carbsSum">4</span>
                <span class="proteinSum">35</span>
                <span class="sodiumSum">560</span>
                <span class="chloesterolSum">90</span>
            </li>
            <li>
                <input type="radio" name="protein" value="tofu"> Tofu
            </li>
        </ul>

I'm also wondering if maybe this could be accomplished easier without the use of the calculation plugin. I was peeking at this thread earlier: http://stackoverflow.com/questions/1324703/how-might-i-calculate-the-sum-of-radio-button-values-using-jquery — user1860393, Nov 28 '12 at 16:04
It looks like you do not have nutritional values for the add-ins. Is that correct? — jwatts1980, Nov 28 '12 at 16:06
@jwatts1980, I have them. I just removed some options for a more simple example. — user1860393, Nov 28 '12 at 16:12

score 1 · Accepted Answer · answered Nov 28 '12 at 16:09

1

Very basic; but is this the sort of thing you are after? http://jsfiddle.net/k3edG/3/

What I've done is add an active class to the <li /> which has a selected option. Then I've modified your original update function to only add the values of active items.

I assumed that you would have nutritional information for the checkbox items as well as the radios

Hope that helps :D

answered Nov 28 '12 at 16:09

Stuart Burrows

10,824
2
34
33

Ahhh! This is exactly what I was trying to do. I believe I was about to make this code very bloated - your approach is great. Thank you so much! I would Up-vote but I do not have the proper reputation :) – user1860393 Nov 28 '12 at 16:13
Hey no worries, glad it helped :). You could probably trim this down a bit but I think the essence is sound! – Stuart Burrows Nov 28 '12 at 17:36

jQuery Calculation Plugin - Nutrition Calculator - Add values on click of associated radio button

1 Answers1