问题描述
嗨，我正在做一个披萨店（倾斜项目）的菜单，用户在其中选择单选按钮，然后通过选择按钮来计算总数。 在实例中，我选择了三个单选按钮，分别是中号和大号。 和3个选择框。 每次选择选择框，将在所选单选按钮给定值的价格上增加?1。 例如，如果某些人选择了4英镑的小单选按钮，那么他们选择接下来的三个选择框，总计7英镑，每个选择框应立即显示在屏幕上。 我还没有添加复选框，因为我注意到它不起作用。 我从在线教程中获得了原始脚本，该脚本在我测试时可以正常工作。 但是，在试图修改它以适应整个价格之后，显示总价格的潜水似乎无法正常工作。
< body onload = 'hideTotal()' > < div id = "wrap" > < form action = "" id = "pizzaform" onsubmit = "return false;" > < div > < div class = "cont_order" > < fieldset > < legend > Make your Pizza! < /legend> <label >Size Of the Pizza</label > < br / > Small Pizza 7 "(?4) <label class='radiolabel'><input type=" radio " name=" selectedpizza " value=" Round1 " onclick=" calculateTotal() " />Round </label><br /> Large 11" (?6) < label class = 'radiolabel' > < input type = "radio" name = "selectedpizza" value = "Round2" onclick = "calculateTotal()" / > Round < /label><br / > Midum 15 "(?8) <label class='radiolabel'><input type=" radio " name=" selectedpizza " value=" Round3 " onclick=" calculateTotal() " />Round </label><br /> <br /> <label >Sacuce</label> <select id=" sauce " name='sauce' onchange=" calculateTotal() "> <option value=" None ">Select Sacuce</option> <option value=" Enzo 's classic Sauce">Enzo' s classic Sauce(?1) < /option> <option value="Spicy Tomato">Spicy Tomato(?1)</option > < /select> <br / > < label > Base < /label> <select id="base" name='base' onchange="calculateTotal()"> <option value="None">Select Base</option > < option value = "Thin and cripy" > Thin and cripy(?1) < /option> <option value="Deep Pan">Deep Pan(?1)</option > < option value = "Stuffed Crust" > Stuffed Crust(?1) < /option> </select > < br / > < label > Cheese < /label> <select id="cheese" name='cheese' onchange="calculateTotal()"> <option value="None">Select cheese</option > < option value = "Mozzarella" > Mozzarella(?1) < /option> <option value="Reduced Fat">Reduced Fat(?1)</option > < /select> <br / > < div id = "totalPrice" > < /div> </fieldset > < /div> </div > < /form> </div > <!--End of wrap--> < script language = "javascript" type = "text/javascript" > /* This source is shared under the terms of LGPL 3 www.gnu.org/licenses/lgpl.html You are free to use the code in Commercial or non-commercial projects */ //Set up an associative array //The keys represent the size of the Pizza //The values represent the cost of the Pizza ie A 15" Pizza cost's ?8 var pizza_prices = new Array(); pizza_prices["Round1"] = 4; pizza_prices["Round2"] = 6; pizza_prices["Round3"] = 8; var sacuce_prices = new Array(); sacuce_prices["None"] = 0; sacuce_prices["Enzo's classic Sauce"] = 1; sacuce_prices["Spicy Tomato"] = 1; var base_prices = new Array(); base_prices["None"] = 0; base_prices["Thin and cripy"] = 1; base_pricess["Deep Pan"] = 1; base_pricess["Stuffed Crust"] = 1; var cheese_prices = new Array(); cheese_prices["None"] = 0; cheese_prices["Mozzarella"] = 1; cheese_prices["Reduced Fat"] = 1; // getPizzaSizePrice() finds the price based on the size of the Pizza. // Here, we need to take user's the selection from radio button selection function getPizzaSizePrice() { var pizzaSizePrice = 0; //Get a reference to the form id="pizzaform" var theForm = document.forms["pizzaform"]; //Get a reference to the Pizza the user Chooses name=selectedPizza": var selectedPizza = theForm.elements["selectedpizza"]; //Here since there are 4 radio buttons selectedPizza.length = 4 //We loop through each radio buttons for (var i = 0; i < selectedPizza.length; i++) { //if the radio button is checked if (selectedPizza[i].checked) { //we set PizzaSizePrice to the value of the selected radio button //ie if the user choose the 8" Pizza we set it to 6 //by using the pizza_prices array //We get the selected Items value //For example pizza_prices["Round2".value]" pizzaSizePrice = pizza_prices[selectedPizza[i].value]; //If we get a match then we break out of this loop //No reason to continue if we get a match break; } } //We return the PizzaSizePrice return PizzaSizePrice; } function getPizzaSacucePrice() { var pizzaSaucePrice = 0; //Get a reference to the form id="cakeform" var theForm = document.forms["pizzaform"]; //Get a reference to the select id="sauce" var selectedSauce = theForm.elements["sauce"]; //set pizzaSauce Price equal to value user chose //For example sauce_prices pizzaSaucePrice = sauce_prices[selectedSauce.value]; //finally we return pizzaSaucePrice return PizzaSaucePrice; } function getBasePrice() { var pizzaBasePrice = 0; //Get a reference to the form id="pizzaform" var theForm = document.forms["pizzaform"]; //Get a reference to the select id="base" var selectedBauce = theForm.elements["base"]; //set pizzaBase Price equal to value user chose //For example base_prices pizzaBaseePrice = base_prices[selectedBase.value]; //finally we return pizzaSaucePrice return pizzaBasePrice; } function getCheesePrice() { var pizzaCheesePrice = 0; //Get a reference to the form id="pizzaform" var theForm = document.forms["pizzaform"]; //Get a reference to the select id="cheese" var selectedCheese = theForm.elements["cheese"]; //set pizzaCheese Price equal to value user chose //For example cheese_prices pizzaBaseePrice = cheese_prices[selectedSauce.value]; //finally we return pizzaCheesePrice; return PizzaCheesePrice; } function calculateTotal() { //Here we get the total price by calling our function //Each function returns a number so by calling them we add the values they return together var pizzaPrice = getPizzaSizePrice() + getSacucePrice() + getBasePrice() + getCheesePrice(); //display the result var divobj = document.getElementById('totalPrice'); divobj.style.display = 'block'; divobj.innerHTML = "Total Price For the Pizza ?" + pizzaPrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display = 'none'; } < /script>
<body onload='hideTotal()'> <div id="wrap"> <form action="" id="pizzaform" onsubmit="return false;"> <div> <div class="cont_order"> <fieldset> <legend>Make your Pizza!</legend> <label>Size Of the Pizza</label> <br />Small Pizza 7"(?4) <label class='radiolabel'> <input type="radio" name="selectedpizza" value="Round1" onclick="calculateTotal()" />Round</label> <br />Large 11"(?6) <label class='radiolabel'> <input type="radio" name="selectedpizza" value="Round2" onclick="calculateTotal()" />Round</label> <br />Midum 15"(?8) <label class='radiolabel'> <input type="radio" name="selectedpizza" value="Round3" onclick="calculateTotal()" />Round</label> <br /> <br /> <label>Sacuce</label> <select id="sauce" name='sauce' onchange="calculateTotal()"> <option value="None">Select Sacuce</option> <option value="Enzo's classic Sauce">Enzo's classic Sauce(?1)</option> <option value="Spicy Tomato">Spicy Tomato(?1)</option> </select> <br /> <label>Base</label> <select id="base" name='base' onchange="calculateTotal()"> <option value="None">Select Base</option> <option value="Thin and cripy">Thin and cripy(?1)</option> <option value="Deep Pan">Deep Pan(?1)</option> <option value="Stuffed Crust">Stuffed Crust(?1)</option> </select> <br /> <label>Cheese</label> <select id="cheese" name='cheese' onchange="calculateTotal()"> <option value="None">Select cheese</option> <option value="Mozzarella">Mozzarella(?1)</option> <option value="Reduced Fat">Reduced Fat(?1)</option> </select> <br /> <div id="totalPrice"></div> </fieldset> </div> </div> </form> </div> <!--End of wrap-->
有人可以帮忙吗？ 我还计划使用复选框为用户提供10种浇头的选择，是否有限制用户的方式，所以他们只能从10种选择中选择4种？
1楼
rybo111
0
2015-07-25 14:32:08
数据属性对于这两个目的均适用。
计算总数
在收音机，复选框和选项上使用data-price ：
<form id="my-form">
<input type="radio" data-price="100" name="radio">Add 1GBP
<input type="radio" data-price="200" name="radio">Add 2GBP
<select>
<option>Select something</option>
<option data-price="300">Add 3GB</option>
<option data-price="400">Add 4GB</option>
</select>
</form>
Total: <span id="my-total"></span>
然后在每次页面加载和使用jQuery进行表单更改时计算它们：
$('#my-form').on('change', function(){
update_total();
});
function update_total(){
var tot = 0;
var price = 0;
$('#my-form input:checked').each(function(){
price = $(this).data('price');
if(price > 0){
tot += price;
}
});
$('#my-form select').each(function(){
price = $("option:selected", this).data('price');
if(price > 0){
tot += price;
}
});
$('#my-total').html(tot);
}
update_total();
限制复选框
使用data-max-check定义可在给定容器中选中的最大复选框数：
<div data-max-check="4">
<input type="checkbox">
<input type="checkbox">...
然后使用jQuery阻止用户选择超出最大值的选项：
$('[data-max-check] input[type=checkbox]').on('click', function(e){
var $parent = $(this).closest('[data-max-check]');
var max = $parent.data('max-check');
var chk = $parent.find('input[type=checkbox]:checked').size();
if(chk > max){
alert('You can only select up to ' + max);
e.preventDefault();
}
});
演示
您可以在此处看到两者的作用：