Question

我在餐馆菜单上工作，并且我在这里制作汉堡，薯条和饮料作为复选框。当你点击汉堡或薯条或饮料选项出现供你选择，如汉堡包括奶酪或汉堡平原或培根或两者都可用。还有薯条，你可以选择小中型或大型，饮料有苏打水或瓶装水。我的问题是如何计算所述项目的总数

伯格斯

常规（4.19）带奶酪（4.79）培根（4.79）培根和奶酪（5.39）

薯条小（2.39）中（3.09）大（4.99）

饮料

苏打水（1.69）瓶装水（1.49）

根据我收到的建议，我用我想要的结果创造了这个。

<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body>
<div class="page">
    <div class="topbar">
        Menu
    </div>
    <div class="row">

        <!--Burgers CheckBox-->
        <div class="cell">
            <input type="checkbox" name="chkBurgers" id="chkBurgers" /><label 
for="chkBurgers">Burgers</label>
        </div>

        <!--Cell Containing Burger Menu-->
        <div class="cell" id="divBurgers" style="visibility:hidden;">
            <input type="radio" name="radBurgers" id="radBurgerRegular" value="4.19" /><label  
for="radBurgerRegular">Regular (4.19)</label><br />
            <input type="radio" name="radBurgers" id="radBurgerCheese" value="4.79" /><label 
for="radBurgerCheese">w/ Cheese (4.79)</label><br />
            <input type="radio" name="radBurgers" id="radBurgerBacon" value="4.79" /><label 
for="radBurgerBacon">w/ Bacon (4.79)</label><br />
            <input type="radio" name="radBurgers" id="radBurgerBaconCheese" value="5.39" /><label  
for="radBurgerBaconCheese">w/ Bacon and Cheese (5.39)</label><br />
        </div>
    </div>
    <div class="clear"></div>
    <div class="row">

        <!--Fries CheckBox-->
        <div class="cell">
            <input type="checkbox" name="chkFries" id="chkFries" /><label 
for="chkFries">Fries</label>
        </div>

        <!--Cell Containing Fries Menu-->
        <div class="cell" id="divFries" style="visibility:hidden;">
            <input type="radio" name="radFries" id="radFriesSmall" value="2.39" /><label 
for="radFriesSmall">Small (2.39)</label><br />
            <input type="radio" name="radFries" id="radFriesMedium" value="3.09" /><label 
for="radFriesMedium">Medium (3.09)</label><br />
            <input type="radio" name="radFries" id="radFriesLarge" value="4.99" /><label 
for="radFriesSmall">Large (4.99)</label><br />
        </div>
    </div>
    <div class="clear"></div>
    <div class="row">

        <!--Drinks CheckBox-->
        <div class="cell">
            <input type="checkbox" name="chkDrinks" id="chkDrinks" /><label 
for="chkDrinks">Drinks</label>
        </div>

        <!--Cell Containing Drink Menu-->
        <div class="cell" id="divDrinks" style="visibility:hidden;">
            <input type="radio" name="radDrinks" id="radDrinkSoda" value="1.69" /><label 
for="radDrinkSoda">Soda (1.69)</label><br />
            <input type="radio" name="radDrinks" id="radDrinkWater" value="1.49" /><label 
for="radDrinkWater">Bottled Water (1.49)</label><br />
        </div>

        <!--Cell Containing Compute Button and Total Field-->
        <div class="cell" style="float:right;">
            Total Meal Cost: <input type="text" name="txtTotal" id="txtTotal" /><br /><br />
            <button id="btnCompute" name="btnCompute">Compute Total</button>
        </div>
    </div>
    <div class="clear"></div>
</div>
<link rel="stylesheet" type="text/css" href="week11.css">
<script src="week11.js"></script>
</body>
</html>

使用Javascript：

var total = parseFloat(document.getElementById('txtTotal').value);

function ToggleBurgers() {
var chkBurgers = document.getElementById('chkBurgers');
var burgers = document.getElementById('divBurgers');

if (chkBurgers.checked) {
    burgers.style.visibility = 'visible';
} else {
    burgers.style.visibility = 'hidden';
}
}

function ToggleFries() {
var chkFries = document.getElementById('chkFries');
var fries = document.getElementById('divFries');

if (chkFries.checked) {
    fries.style.visibility = 'visible';
} else {
    fries.style.visibility = 'hidden';
}
}

function ToggleDrinks() {
var chkDrinks = document.getElementById('chkDrinks');
var drinks = document.getElementById('divDrinks');

if (chkDrinks.checked) {
    drinks.style.visibility = 'visible';
} else {
    drinks.style.visibility = 'hidden';
}
}

function ComputeTotal() {
var total = 0;
    if(document.getElementById('chkBurgers').checked){
    if(document.getElementById('radBurgerRegular').checked){
         total += 4.19;
    }
    if(document.getElementById('radBurgerCheese').checked){
         total += 4.79;
    }
    if(document.getElementById('radBurgerBacon').checked){
         total += 4.79;
    }
    if(document.getElementById('radBurgerBaconCheese').checked){
         total += 5.39;
    }
}

if(document.getElementById('chkFries').checked){
if(document.getElementById('radFriesSmall').checked){
        total += 2.39;
}
if(document.getElementById('radFriesMedium').checked){
        total += 3.09;
}
if(document.getElementById('radFriesLarge').checked){
        total += 4.99;
}
}

if(document.getElementById('chkDrinks').checked){
if(document.getElementById('radDrinkSoda').checked){
        total += 1.69;
}
if(document.getElementById('radDrinkWater').checked){
        total += 1.49;
}
}
document.getElementById('txtTotal').value = total;
}

function init() {
var chkBurgers = document.getElementById('chkBurgers');
chkBurgers.onchange = ToggleBurgers;

var chkFries = document.getElementById('chkFries');
chkFries.onchange = ToggleFries;

var chkDrinks = document.getElementById('chkDrinks');
chkDrinks.onchange = ToggleDrinks;

var btnCompute = document.getElementById('btnCompute');
btnCompute.onclick = ComputeTotal;
}

window.onload = init;

Answer 1

我认为Stack的这个问题还可以。它有点古怪，但至少提供了代码等等......

无论如何，使用代码：

function ComputeTotal() {
    var total = 0;
    if(document.getElementById('chkBurgers').checked){
        if(document.getElementById('radBurgerRegular').checked){
             total += 4.19;
        }
        if(document.getElementById('radBurgerCheese').checked){
             total += 4.79;
        }
        if(document.getElementById('radBurgerBacon').checked){
             total += 4.79;
        }
        if(document.getElementById('radBurgerBaconCheese').checked){
             total += 5.39;
        }
    }

    if(document.getElementById('chkFries').checked){
        // -- etc. etc.
    }

    // -- etc. etc.
    document.getElementById('txtTotal').value = total;

}

您可以通过设置＆＃34;值＆＃34;来改善代码。单选按钮的价格。 e.g。

<input type="radio" name="radBurgers" id="radBurgerRegular" value="4.19" /><label for="radBurgerRegular">Regular (4.19)</label>

然后您可以执行以下操作：

total += document.getElementById('radBurgerRegular').checked ? parseFloat(document.getElementById('radBurgerRegular').value) : 0;

每个单选按钮

。

你甚至可以将它包装在一个函数中，例如：

total += addValueOf('radBurgerRegular');  // -- for each line

并将函数设置为：

function addValueOf(elementId){
    return document.getElementById(elementId).checked ? parseFloat(document.getElementById(elementId).value : 0;
}

你绝对可以用jQuery更快，更整洁，更好，更漂亮地编写它，但首先要学习构建模块是件好事 - 坚持下去！

如何使用Javascript计算总计

1 个答案: