Question

我在这里使用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>

Answer 1

非常基本;但这是你追求的那种东西吗？ http://jsfiddle.net/k3edG/3/

我所做的是将活动类添加到具有所选选项的<li />。然后我将原始更新功能修改为仅添加活动项的值。

我认为你会获得复选框项目和无线电

的营养信息

希望有所帮助：D

jQuery Calculation Plugin - 营养计算器 - 点击相关的单选按钮添加值

1 个答案: