I'm currently stuck in a function and believe it would be helpful for you to guide me along the correct path.
My goal is to sum the values of checked boxes with the values of checked radio buttons. However, the radio values are continuously accumulating on each click, indicating an issue with the function. Nonetheless, as someone who enjoys delving into code and learning independently, I am determined to resolve this.
The total sum displays the correct values, but upon clicking a radio button again, it accumulates once more.
I have provided a snippet for you to test out. Your assistance would be greatly appreciated!
html, body {
height: 100%;
margin: 0;
}
#left {
width: 20%;
height: 100%;
position: fixed;
outline: 1px solid transparent;
background: white;
}
#right {
width: 80%;
height: auto;
outline: 1px solid transparent;
position: absolute;
right: 0;
background: #FFFFFF;
}
.text{
width:250px;
height:286px;
background:#FFF;
opacity:0;
}
.checkbox-custom, .radio-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: left;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
background: rebeccapurple;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
background: rebeccapurple;
}
.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
outline: 1px solid #ddd; /* focus style */
}
.checkbox-grid li {
display: block;
float: left;
width: 25%;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Welcome to Invest Consulting!</title>
<link href="official-site-styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var total = 0;
function calculate(item){
if(item.checked){
total += parseInt(item.value);
}
else{
total -= parseInt(item.value);
}
document.getElementById('Totalcost').innerHTML = total + "";
}
</script>
</head>
<body>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" value="500" onClick="calculate(this); -500" />
<label for="radio-1" class="radio-custom-label">Service</label>
<input id="radio-2" class="radio-custom" name="radio-group" type="radio" value="500" onClick="calculate(this); -500" />
<label for="radio-2" class="radio-custom-label">Commerce</label>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio" value="500" onClick="calculate(this); -500" />
<label for="radio-3" class="radio-custom-label">Service and Commerce</label>
<br>
<ul class="checkbox-grid">
<li>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" value="500" onClick="calculate(this);" />
<label for="checkbox-1" class="checkbox-custom-label">$500</label>
</li>
(remaining HTML snippet omitted for brevity)