时间戳

首页 > 解决方案 > I need to add multiple checked radio values into a single variable

javascript - I need to add multiple checked radio values into a single variable

问题描述

So I'm starting with JavaScript and I was trying to make a product selection form.

I want it to display the individual prices and then the total but problem comes when displaying the total, I have no idea how to make that function. Im not using JQuery by the way. If you can come up with something it'll be really helpful. Thanks!

//Pricelist
var aa = 7;
var ab = 5;

var ba = 1;
var bb = 3;
var bc = 5;

//Defined Variables
document.getElementById("Pizza").value = aa;
document.getElementById("Burguer").value = ab;

document.getElementById("Small").value = ba;
document.getElementById("Medium").value = bb;
document.getElementById("Large").value = bc;

//Display the prices
function decirValue() {
            if(document.getElementById('Pizza').checked) {
                document.getElementById("dispa").innerHTML
                    = document.getElementById("Pizza").value + " $ for the meal";
            }
            else if(document.getElementById('Burguer').checked) {
                document.getElementById("dispa").innerHTML
                    = document.getElementById("Burguer").value + " $ for the meal";
            }
            
            
            if(document.getElementById('Small').checked) {
                document.getElementById("dispb").innerHTML
                    = document.getElementById("Small").value + " $ for the size";
            }
            else if(document.getElementById('Medium').checked) {
                document.getElementById("dispb").innerHTML
                    = document.getElementById("Medium").value + " $ for the size";
            }
            else if(document.getElementById('Large').checked) {
                document.getElementById("dispb").innerHTML
                    = document.getElementById("Large").value + " $ for the size";
            }
}
<!DOCTYPE html>
<html>
<body>
	<form id="jsform">
    
<h3>Select a meal</h3>
<input type="radio" class="stylebtn" name="food" id="Pizza" value="" checked="checked">Pizza<br>
<input type="radio" class="stylebtn" name="food" id="Burguer" value="">Burguer<br>

<h3>Select size</h3>
<input type="radio" class="stylebtn" name="dimensions" id="Small" value="" checked="checked">Small<br>
<input type="radio" class="stylebtn" name="dimensions" id="Medium" value="">Medium<br>
<input type="radio" class="stylebtn" name="dimensions" id="Large" value="">Large<br><br>

<button type="button" onclick="decirValue();">Submit</button>
<br>
<h4 id="dispa"></h4>
<h4 id="dispb"></h4>
<h4 id="totalprice">0 $</h4>
	</form>
</body>
</html>

标签： javascripthtmlvariablescheckbox

解决方案

set a global variable and inside function decirValue() calculate the total price like following:

//Pricelist
var aa = 7;
var ab = 5;

var ba = 1;
var bb = 3;
var bc = 5;

var totalPrice = 0;

//Defined Variables
document.getElementById("Pizza").value = aa;
document.getElementById("Burguer").value = ab;

document.getElementById("Small").value = ba;
document.getElementById("Medium").value = bb;
document.getElementById("Large").value = bc;

//Display the prices
function decirValue() {
            if(document.getElementById('Pizza').checked) {
                totalPrice += aa;
                document.getElementById("dispa").innerHTML
                    = document.getElementById("Pizza").value + "&nbsp;$ for the meal";
            }
            else if(document.getElementById('Burguer').checked) {
                totalPrice += ab;
                document.getElementById("dispa").innerHTML
                    = document.getElementById("Burguer").value + "&nbsp;$ for the meal";
            }
            
            
            if(document.getElementById('Small').checked) {
                totalPrice += ba;
                document.getElementById("dispb").innerHTML
                    = document.getElementById("Small").value + "&nbsp;$ for the size";
            }
            else if(document.getElementById('Medium').checked) {
                totalPrice += bb;

                document.getElementById("dispb").innerHTML
                    = document.getElementById("Medium").value + "&nbsp;$ for the size";
            }
            else if(document.getElementById('Large').checked) {
                totalPrice += bc;
                document.getElementById("dispb").innerHTML
                    = document.getElementById("Large").value + "&nbsp;$ for the size";
            }
       document.getElementById("totalprice").innerHTML = "total : " + totalPrice + " $";
}
<!DOCTYPE html>
<html>
<body>
	<form id="jsform">
    
<h3>Select a meal</h3>
<input type="radio" class="stylebtn" name="food" id="Pizza" value="" checked="checked">Pizza<br>
<input type="radio" class="stylebtn" name="food" id="Burguer" value="">Burguer<br>

<h3>Select size</h3>
<input type="radio" class="stylebtn" name="dimensions" id="Small" value="" checked="checked">Small<br>
<input type="radio" class="stylebtn" name="dimensions" id="Medium" value="">Medium<br>
<input type="radio" class="stylebtn" name="dimensions" id="Large" value="">Large<br><br>

<button type="button" onclick="decirValue();">Submit</button>
<br>
<h4 id="dispa"></h4>
<h4 id="dispb"></h4>
<h4 id="totalprice">0 $</h4>
	</form>
</body>
</html>

I hope be useful

推荐阅读