计算单选按钮的值，选择和复选框
Calculating the value of radio buttons, select and check boxes
嗨，我正在做一个比萨店的菜单(学习项目)，其中一个用户选择单选按钮，选择按钮它计算总数。例如，我选择了三个单选按钮，小，中，大。还有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种?
数据属性可以很好地满足这两种目的。
合计
在无线电，复选框和选项上使用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();
}
});
您可以在这里看到两者的作用:JSFiddle
相关文章：
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 禁用选择/复选框 当选择/选中另一个时
- 如何使用JQuery按值选择复选框
- jquery选择复选框选择的值
- 取消选中时选择最接近的“从中选择”复选框
- 根据动态值选择和取消选择复选框
- 选择/取消选择复选框，该复选框未按预期使用.coneast('table'）.find('tbo
- 背景图像切换和隐藏选择复选框
- 如何通过选择复选框和下拉列表用Javascript更改标签值
- 选择复选框的Javascript
- 如何将选择复选框值动态传递给 ajax 调用变量动态发布到 php 变量
- 获取多个选择复选框的值 Javascript
- 翡翠，如果其他速记选择复选框
- jQuery动态选择复选框组onChange
- 按住Shift键并单击以选择复选框范围
- 选中p中的所有复选框:选择复选框菜单
- 选择复选框时显示数据
- 从多个JSON文件中选择复选框时切换标记
- 如何为第一次选择和第二次选择复选框应用不同的颜色
- 如何在HTML中选择复选框时创建弹出窗口
