0
我正在尝试制作营养计算器。它应该在单选按钮中的值并显示值，但我不知道为什么它不起作用。下面的代码似乎不起作用。计算单选按钮的值
<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>
只显示相关代码或发布测试小提琴 – kennypu
你的代码依赖于jQuery的，但你有没有装好了。 – IsisCode
嗨IsisCode，我试着加入这一行来运行该功能，但尝试失败了..我在编程上很糟糕。抱歉给你带来不便。将真正重视您的任何输入。全麦玉米饼 – Vithiyah