我正在为披萨店（Leaning项目）做一个菜单，其中一个用户选择单选按钮，它计算总数。实例当中我选择了三个中小型的单选按钮。和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 i.e 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
//i.e. 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个？
答案 0 :(得分：0)
数据属性可以很好地用于这两个目的。
在无线电，复选框和选项上使用ABMultiValueRef phones = ABRecordCopyValue(person, kABPersonPhoneProperty);
if (phones != NULL) {
for (NSInteger index = 0; index < ABMultiValueGetCount(phones); index++) {
NSString *phone = CFBridgingRelease(ABMultiValueCopyValueAtIndex(phones, index));
NSString *label = CFBridgingRelease(ABMultiValueCopyLabelAtIndex(phones, index)); // either kABHomeLabel or kABPersonPhoneMainLabel or ...
// do something with `phone` and `label`
}
CFRelease(phones);
}
：
data-price然后使用jQuery在每个页面加载和表单更改上计算它们：
<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>
使用$('#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然后阻止用户使用jQuery选择超过最大值：
<div data-max-check="4">
<input type="checkbox">
<input type="checkbox">...
您可以在此处看到两者：JSFiddle