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

Question

My working code only works properly when the first inputted value is from the radio button followed by the check box. However, when it's the other way around, the radio button value keeps resetting the value of the check box and I don't know how to fix it.

Here's my HTML codes :

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

Here's my Javascript codes :

<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

Would be better to simply reuse the same function triggered instead by the onchange event.

<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

There is no need to define separate functions to calculate total. You may write two functions in your JavaScript code. one to assign onClick event handler and the other to calculate total price . Replace your JavaScript with following code:

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

Assign Event Handler to all radio and checkbox inputs at page start-up

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

See working example at JsFiddle: http://jsfiddle.net/hm3zsthx/2/