如何使用javascript自动计算单选按钮和复选框值
How to automatically compute Radio button and Checkbox values using javascript
只有当第一个输入值来自单选按钮，然后是复选框时，我的工作代码才能正常工作。然而，当它是反过来的时候，单选按钮的值一直重置复选框的值，我不知道如何修复它。
以下是我的HTML代码:以下是我的Javascript代码:<font face = "Algerian" ><h2>What Kind of Burger Would You Like to Order?</h2></font> <form name ="burgz"> Add-ons <br/>     <input type="checkbox" name="AO1" value="45" onclick="calculate1();">Bacon - 45     <input type="checkbox" name="AO2" value="40" onclick="calculate2();">Sausage - 40     <input type="checkbox" name="AO3" value="30" onclick="calculate3();">Ham - 30     <input type="checkbox" name="AO4" value="10" onclick="calculate4();">Tomatoes - 10     <input type="checkbox" name="AO5" value="3" onclick="calculate5();">Peppers - 3     <input type="checkbox" name="AO6" value="5" onclick="calculate6();">Olives - 5     <input type="checkbox" name="AO7" value="15" onclick="calculate7();">Extra Cheese - 15 <br/> Size<br/>     <input type="radio" name="size" value="10" onclick="calculateRadio();">Small - 10     <input type="radio" name="size" value="20" onclick="calculateRadio();">Medium - 20     <input type="radio" name="size" value="30" onclick="calculateRadio();">Large - 30 <input type="hidden" name="size"> <br/> Shape<br/>     <input type="radio" name="shape" value="15" onclick="calculateRadio();">Round - 15     <input type="radio" name="shape" value="10" onclick="calculateRadio();">Square - 10 <input type="hidden" name="shape"> <br/> <p>Total Price: <input type="text" name="total_price" value="0" readonly="readonly"></p> </form>
<script type = "text/javascript">
///////////auto-total checkbox
function calculate1() {
var p1= eval(burgz.total_price.value)
if(document.burgz.AO1.checked==true){
p1 += eval(45);
}
else{
p1 -=eval(45);
}
burgz.total_price.value = eval(p1)
}
function calculate2() {
var p1= eval(burgz.total_price.value)
if(document.burgz.AO2.checked==true){
p1 += eval(40);
}
else{
p1 -=eval(40);
}
burgz.total_price.value = eval(p1)
}
function calculate3() {
var p1= eval(burgz.total_price.value)
if(document.burgz.AO3.checked==true){
p1 += eval(30);
}
else{
p1 -=eval(30);
}
burgz.total_price.value = eval(p1)
}
function calculate4() {
var p1= eval(burgz.total_price.value)
if(document.burgz.AO4.checked==true){
p1 += eval(10);
}
else{
p1 -=eval(10);
}
burgz.total_price.value = eval(p1)
}
function calculate5() {
var p1= eval(burgz.total_price.value)
if(document.burgz.AO5.checked==true){
p1 += eval(3);
}
else{
p1 -=eval(3);
}
burgz.total_price.value = eval(p1)
}
function calculate6() {
var p1= eval(burgz.total_price.value)
if(document.burgz.AO6.checked==true){
p1 += eval(5);
}
else{
p1 -=eval(5);
}
burgz.total_price.value = eval(p1)
}
function calculate7() {
var p1= eval(burgz.total_price.value)
if(document.burgz.AO7.checked==true){
p1 += eval(15);
}
else{
p1 -=eval(15);
}
burgz.total_price.value = eval(p1)
}
/////////radioButton computation
function calculateRadio() {
var s1, sh1;
s1 = burgz.size.value * 1;
sh1 = burgz.shape.value * 1;
total = s1 + sh1;
burgz.total_price.value = total;
}
</script>
最好是简单地重用由onchange事件触发的相同函数。
<font face = "Algerian" ><h2>What Kind of Burger Would You Like to Order?</h2></font>
<form name ="burgz">
Add-ons <br/>
    <input type="checkbox" name="AO1" value="45" onchange="calculate(this);">Bacon - 45
    <input type="checkbox" name="AO2" value="40" onchange="calculate(this);">Sausage - 40
    <input type="checkbox" name="AO3" value="30" onchange="calculate(this);">Ham - 30
    <input type="checkbox" name="AO4" value="10" onchange="calculate(this);">Tomatoes - 10
    <input type="checkbox" name="AO5" value="3" onchange="calculate(this);">Peppers - 3
    <input type="checkbox" name="AO6" value="5" onchange="calculate(this);">Olives - 5
    <input type="checkbox" name="AO7" value="15" onchange="calculate(this);">Extra Cheese - 15
<br/>
Size<br/>
    <input type="radio" name="size" value="10" onchange="calculate(this);">Small - 10
    <input type="radio" name="size" value="20" onchange="calculate(this);">Medium - 20
    <input type="radio" name="size" value="30" onchange="calculate(this);">Large - 30
<input type="hidden" name="size">
<br/>
Shape<br/>
    <input type="radio" name="shape" value="15" onchange="calculate(this);">Round - 15
    <input type="radio" name="shape" value="10" onchange="calculate(this);">Square - 10
<input type="hidden" name="shape">
<br/>
<p>Total Price: <input type="text" name="total_price" value="0" readonly="readonly"></p>
</form>
<script type="text/javascript">
var lastSizeVal = 0;
var lastShapeVal = 0;
function calculate(input) {
var total = parseInt(burgz.total_price.value);
var value = parseInt(input.value);
if (input.type === 'radio') {
if (input.name === 'size') {
total -= lastSizeVal;
lastSizeVal = value;
}
else {
total -= lastShapeVal;
lastShapeVal = value;
}
}
if (input.checked)
burgz.total_price.value = total + value
else
burgz.total_price.value = total - value;
}
</script>
不需要定义单独的函数来计算total。您可以在JavaScript代码中编写两个函数。一个分配给onClick事件处理程序，另一个分配给calculate total price。用下面的代码替换你的JavaScript:
计算总价的函数
function calculate_price () {
var total_price = document.querySelector("input[name=total_price]");
total_price.value = 0;
elements = document.querySelectorAll("input");
Array.forEach(elements, function(element) {
var type = element.getAttribute("type");
if (type == "radio" || type == "checkbox") {
if (element.checked == true) {
total_price.value = parseInt(total_price.value) + parseInt(element.value);
}
}
});
}
在页面启动时为所有单选和复选框输入分配事件处理程序
window.onload = function () {
elements = document.querySelectorAll("input");
Array.forEach(elements, function(element) {
var type = element.getAttribute("type");
if (type == "radio" || type == "checkbox") {
element.onclick = calculate_price;
}
});
}
参见JsFiddle的工作示例:http://jsfiddle.net/hm3zsthx/2/
相关文章：
- 复选框:一次只允许单击一个复选框
- 谷歌应用程序脚本示例-如何更改单选按钮的列表框相关值
- 如何在刷新时重新填充表单中的复选框并将表单值发布到页面
- 如何通过jQuery选中所有复选框并在单击一个复选框时取消选择
- 在单击父复选框的同时获取子复选框的详细信息
- 通过 JQuery 获取单击的复选框的值属性
- 单击“角度”复选框时更新不相关的字段
- 根据选中的单选按钮更改选择框
- 通过单击1复选框选中所有复选框
- 无论首先单击哪个复选框，都需要调用函数1次-.one(）的一些变体
- 高级表单提交-单选、复选框和重定向
- 样式为 -webkit-外观的单选按钮:复选框:Chrome 中的不确定状态
- 引导数据切换单选按钮/复选框选中属性
- 如何创建具有两种状态的按钮切换，其行为类似于表单输入的复选框
- 如何绑定引导按钮复选框和表单
- 如何使用单选和复选框按钮验证javascript验证
- 在表单操作与复选框或单选按钮之间交替进行
- 提交按钮不能使用混合单选和复选框输入类型
- 单选按钮+复选框组合
- 表单提交的复选框:点击按钮时显示错误
