jQuery를 계산 플러그인 - - 영양 계산기 관련된 라디오 버튼

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