라디오 버튼의 값 계산

영양 계산기를 만들려고합니다. 라디오 버튼의 값을 표시하고 값을 표시해야하지만 왜 작동하지 않는지는 알 수 없습니다. 아래 코드는 작동하지 않는 것 같습니다.라디오 버튼의 값 계산

<html> 
<head> 

<script language="JavaScript" type="text/javascript"> 
$(document).ready(function() { 
$('.options').on('change', 'input', function() { 
    var $self = $(this); 
    var inputType = $self.attr('type'); 

    if (inputType == 'radio') { 
     $self.parent('li').addClass('active').siblings().removeClass('active'); 
    } else if (inputType == 'checkbox') { 
     $self.parent('li').toggleClass('active'); 
    } 
    runUpdate(); 
}); 

}); 

function runUpdate() { 

//get the sum of the elements 

var calories = $(".caloriesSum", '.active').sum(); 
var fat = $(".fatSum", '.active').sum(); 
var satfat = $(".satfatSum", '.active').sum(); 
var carbs = $(".carbsSum", '.active').sum(); 
var protein = $(".proteinSum", '.active').sum(); 
var sodium = $(".sodiumSum", '.active').sum(); 
var chloresterol = $(".chloesterolSum", '.active').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()); 
}? 
</script> 


<style type="text/css"> 
ul.options li span {display:none;} 
#totals {padding:20px; background:#eee;} 
#totals span {font-weight:bold;} 
h4,ul {margin:0 0 15px;} 
</style> 

</head> 
<body> 

<form action="" method="post" id="nutform" onsubmit="return false;"> 
     <h2>Taqueria Nutritionals</h2> 

     <h4>Pick Your Meal</h4> 

    <!--Radio Buttons with Values --> 

     <ul class="options"> 
      <li> 
       <input type="radio" id="wwheatt" name="meal"  value="whole_wheat_tortilla"> Whole Wheat Tortilla 

    <!-- This class contains the values that it should add --> 

       <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> 

     <h4>The Add-ins</h4> 

     <ul class="options"> 
      <li> 
       <input type="checkbox" name="the_addins" value="white_rice"> White Rice 
      <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="checkbox" name="the_addins" value="brown_rice"> Brown Rice 
      </li> 
      <li> 
       <input type="checkbox" name="the_addins" value="black_beans"> Black         Beans 
      </li> 
      <li> 
       <input type="checkbox" name="the_addins" value="pinto_beans"> Pinto Beans 
      </li> 
     </ul> 

     <h4>Salsas</h4> 

     <ul class="options"> 
      <li> 
       <input type="checkbox" name="salsas" value="pico_de_gallo"> Pico De Gallo 
      </li> 
      <li> 
       <input type="checkbox" name="salsas" value="tomatillo_salsa"> Tomatillo Salsa 
      </li> 
      <li> 
       <input type="checkbox" name="salsas" value="roasted_corn_salsa"> Roasted Corn Salsa 
      </li> 
      <li> 
       <input type="checkbox" name="salsas" value="fire_roasted_red_salsa"> Fire Roasted Red Salsa 
      </li> 
     </ul>  

     <h4>Add-ins</h4> 

     <ul class="options"> 
      <li> 
       <input type="checkbox" name="addins" value="lettuce"> Lettuce 
      </li> 
      <li> 
       <input type="checkbox" name="addins" value="shredded_cheese"> Shredded Cheese 
      </li> 
      <li> 
       <input type="checkbox" name="addins" value="crema"> Crema 
      </li> 
      <li> 
       <input type="checkbox" name="addins" value="chipotle_crema"> Chipotle Crema 
      </li> 
      <li> 
       <input type="checkbox" name="addins" value="guacamole"> Guacamole 
      </li> 
     </ul>    


    <!-- This is where the values should display --> 

     <div id="totals"> 

      <h4>Totals</h4> 

      <ul> 


       <li>Calories: <span id="totalCalories"> </span></li> 
       <li>Fat: <span id="totalFat"> </span>g</li> 
       <li>Sat. Fat: <span id="totalSatFat"> </span>g</li> 
       <li>Carbs: <span id="totalCarbs"> </span>g</li> 
       <li>Protein: <span id="totalProtein"> </span>g</li> 
       <li>Sodium: <span id="totalSodium"> </span>mg</li> 
       <li>Cholesterol: <span id="totalChloresterol"> </span>mg</li> 
      </ul> 
     </div> 
    <!-- #totals --> 

    </form> 

    </body> 

    </html>

출처

2013-01-07 Vithiyah

http://jsfiddle.net/QM9gP/

는 관련 코드를 표시하거나 – kennypu

귀하의 코드가 jQuery를에 따라 시험 바이올린을 게시하지만 당신은 그것을로드하지 않았습니다. – IsisCode

안녕 IsisCode, 나는이 라인에서 함수를 실행하려고 시도했지만 시도가 너무 실패했습니다. 나는 프로그래밍에 상당히 좋지 않습니다. 불편을 드려 죄송합니다. 귀하의 의견을 정말로 가치있게 여기시겠습니까? 전체 밀 옥수수 – Vithiyah

jQuery 컬렉션의 값을 추가하는 $ .sum 플러그인이 누락 된 것 같습니다. 나는 자리에 (first hit on a Google search) 하나를 떨어 뜨리고 코드가 잘 작동합니다.

$.fn.sum = function() { 
    var sum = 0; 
    this.each(function() { 
     if ($(this).is(':input')) { 
      var val = $(this).val(); 
     } else { 
      var val = $(this).text(); 
     } 
     sum += parseFloat(('0' + val).replace(/[^0-9-\.]/g, ''), 10); 
    }); 
    return sum; 
}; 

$('.options').on('change', 'input', function() { 
    var $self = $(this); 
    var inputType = $self.attr('type'); 

    if (inputType == 'radio') { 
     $self.parent('li').addClass('active').siblings().removeClass('active'); 
    } else if (inputType == 'checkbox') { 
     $self.parent('li').toggleClass('active'); 
    } 
    runUpdate(); 
}); 

function runUpdate() { 
    console.log('run update'); 

    // get the sum of the elements 

    var calories = $(".caloriesSum", '.active').sum(); 
    var fat = $(".fatSum", '.active').sum(); 
    var satfat = $(".satfatSum", '.active').sum(); 
    var carbs = $(".carbsSum", '.active').sum(); 
    var protein = $(".proteinSum", '.active').sum(); 
    var sodium = $(".sodiumSum", '.active').sum(); 
    var chloresterol = $(".chloesterolSum", '.active').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()); 
}

출처

2013-01-07 17:33:00 Nate

안녕하세요 네이트, 내 코드를 당신의 코드로 대체하려고했지만 여전히 작동하지 않습니다. 제안 주셔서 감사합니다 :) – Vithiyah

신중하게 봐주세요 - 당신이 내 라이브 JSFiddle 보면, 당신은 작동 예제를 볼 수 있습니다. 그래도 문제가 해결되지 않으면 여기에서 제공 한 것과 별도로 구현상의 문제가 발생했습니다. – Nate

네이트, 왜 내 페이지가 제대로 작동하지 않고 바이올린이 작동하는지 전혀 알 수 없습니다. 내 HTML 페이지를 여기 http://temp-share.com/show/Pf3Yy4Oq2에 추가했습니다. 네가 괜찮 으면 나 좀 봐줘. 정말 고맙게 생각합니다. – Vithiyah

라디오 버튼의 값 계산

답변

관련 문제