1

我在这里使用 jQuery 计算插件：http ://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

这是一个 jsFiddle：http: //jsfiddle.net/k3edG/4/

如您所见，我有多个单选按钮。除了单选按钮，现在 - 我有汇总总计区域中所有营养数据的跨度。

我想要做的是只有当用户选择相关的单选按钮时才计算每个营养项目的总数。

我想过为每个单选按钮做 onclick 事件，但我还没有到任何地方。

有什么想法吗？

$(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>
4

1 回答 1

1

非常基础；但这是你所追求的吗？http://jsfiddle.net/k3edG/3/

我所做的是向<li />具有选定选项的活动类添加一个活动类。然后我修改了你原来的更新函数，只添加活动项的值。

我假设您将获得复选框项目和收音机的营养信息

希望有帮助：D

于 2012-11-28T16:09:43.497 回答