计算单选按钮中的值
Calculating Values in Radio Button
我想做一个营养计算器。它应该在单选按钮的值和显示值，但我不知道为什么它不工作。下面的代码似乎不起作用。
<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>
您好像少了一个$。sum插件，用于添加jQuery集合的值。我放了一个在适当的地方(第一次点击谷歌搜索)，你的代码工作得很好。
http://jsfiddle.net/QM9gP/$.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());
}
相关文章：
- 根据选中的按钮运行不同的计算时，设置单选按钮
- 使用单选按钮的输入计算分数
- 使用 Javascript 计算具有单选按钮、文本字段和滑块组合的表单字段
- 计算单选按钮的值
- 计算单选按钮的总和，显示总和，并传递给外部 Beanstream 服务器
- 激活单选按钮并计算文本框值
- 如何使用下拉菜单和单选按钮自动计算汇总表
- 计算单选按钮
- Javascript实时计算从单选按钮
- 计算两个单选按钮组的组合值
- 在javascript中使用单选按钮进行计算
- 如何在AngularJS中按名称计算单选按钮的数量
- 单选按钮值计算.第四种选择不会相加
- 我需要使用DOM计算一些选中的单选按钮的值
- 如何使用javascript自动计算单选按钮和复选框值
- 如何计算单选按钮组所需的ng错误
- 计算单选按钮的值，选择和复选框
- 根据选中的单选按钮计算Total As
- 如何使用单选按钮来计算高架图的输出
- 使用单选按钮在测验中计算分数
