如何使用javascript自动计算单选按钮和复选框的值

Question

我的工作代码只在第一个输入值来自单选按钮后跟复选框时才能正常工作。但是，当其他方式时，单选按钮值会不断重置复选框的值，我不知道如何解决该问题。

这里是我的HTML代码：

<font face = "Algerian" ><h2>What Kind of Burger Would You Like to Order?</h2></font> 
<form name ="burgz"> 

Add-ons <br/> 
&nbsp &nbsp <input type="checkbox" name="AO1" value="45" onclick="calculate1();">Bacon - 45 
&nbsp &nbsp <input type="checkbox" name="AO2" value="40" onclick="calculate2();">Sausage - 40 
&nbsp &nbsp <input type="checkbox" name="AO3" value="30" onclick="calculate3();">Ham - 30 
&nbsp &nbsp <input type="checkbox" name="AO4" value="10" onclick="calculate4();">Tomatoes - 10 
&nbsp &nbsp <input type="checkbox" name="AO5" value="3" onclick="calculate5();">Peppers - 3 
&nbsp &nbsp <input type="checkbox" name="AO6" value="5" onclick="calculate6();">Olives - 5 
&nbsp &nbsp <input type="checkbox" name="AO7" value="15" onclick="calculate7();">Extra Cheese - 15 
<br/> 


Size<br/> 
&nbsp &nbsp <input type="radio" name="size" value="10" onclick="calculateRadio();">Small - 10 
&nbsp &nbsp <input type="radio" name="size" value="20" onclick="calculateRadio();">Medium - 20 
&nbsp &nbsp <input type="radio" name="size" value="30" onclick="calculateRadio();">Large - 30 
<input type="hidden" name="size"> 
<br/> 


Shape<br/> 
&nbsp &nbsp <input type="radio" name="shape" value="15" onclick="calculateRadio();">Round - 15 
&nbsp &nbsp <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> 

这里是我的Javascript代码：

<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> 

Answer 1

倒不如简单地重用由onchange事件，而不是触发相同的功能。

<font face = "Algerian" ><h2>What Kind of Burger Would You Like to Order?</h2></font> 
<form name ="burgz"> 

Add-ons <br/> 
&nbsp &nbsp <input type="checkbox" name="AO1" value="45" onchange="calculate(this);">Bacon - 45 
&nbsp &nbsp <input type="checkbox" name="AO2" value="40" onchange="calculate(this);">Sausage - 40 
&nbsp &nbsp <input type="checkbox" name="AO3" value="30" onchange="calculate(this);">Ham - 30 
&nbsp &nbsp <input type="checkbox" name="AO4" value="10" onchange="calculate(this);">Tomatoes - 10 
&nbsp &nbsp <input type="checkbox" name="AO5" value="3" onchange="calculate(this);">Peppers - 3 
&nbsp &nbsp <input type="checkbox" name="AO6" value="5" onchange="calculate(this);">Olives - 5 
&nbsp &nbsp <input type="checkbox" name="AO7" value="15" onchange="calculate(this);">Extra Cheese - 15 
<br/> 


Size<br/> 
&nbsp &nbsp <input type="radio" name="size" value="10" onchange="calculate(this);">Small - 10 
&nbsp &nbsp <input type="radio" name="size" value="20" onchange="calculate(this);">Medium - 20 
&nbsp &nbsp <input type="radio" name="size" value="30" onchange="calculate(this);">Large - 30 
<input type="hidden" name="size"> 
<br/> 


Shape<br/> 
&nbsp &nbsp <input type="radio" name="shape" value="15" onchange="calculate(this);">Round - 15 
&nbsp &nbsp <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> 

Answer 2

没有必要定义单独的函数来计算总。您可以在JavaScript代码中编写两个函数。一个分配onClick事件处理程序，另一个分配到calculate total price。在页面

函数来计算总价

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; 
     } 
    }); 
} 

：用下面的代码替换您的JavaScript

在JsFiddle上查看实例： http://jsfiddle.net/hm3zsthx/2/