I`m stuck in a function and think it will be easy for you to show me the corrected path.
As the title showed I just want to sum checked boxes values with checked radio values, but the radio values are summing indefinetly on each click and I know its something wrong with the function, but Im a adventurer with codes, trying to learn by myself...
The total is showing corrected values, but if I hit radio button again, it will sum it again.
I`ve put a snippet for you to test. Please help!
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>Seja bem vindo a Invista Consultoria!</title>
<link href="oficial-site-codigos.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var total = 0;
function test(item){
if(item.checked){
total+= parseInt(item.value);
}
else{
total-= parseInt(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total + "";
}
</script>
</head>
<body>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this); -500" />
<label for="radio-1" class="radio-custom-label">Servico</label>
<input id="radio-2" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this); -500" />
<label for="radio-2" class="radio-custom-label">Comercio</label>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this); -500" />
<label for="radio-3" class="radio-custom-label">Servico e Comercio</label>
<br>
<ul class="checkbox-grid">
<li>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" value="500" onClick="test(this);" />
<label for="checkbox-1" class="checkbox-custom-label">R$ 500</label>
</li>
<li>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" input type="checkbox" value="120" onClick="test(this);" />
<label for="checkbox-2" class="checkbox-custom-label">R$ 120</label>
</li>
<li>
<input id="checkbox-3" class="checkbox-custom" name="checkbox-3" input type="checkbox" value="350" onClick="test(this);" />
<label for="checkbox-3" class="checkbox-custom-label">R$ 350</label>
</li>
<li>
<input id="checkbox-4" class="checkbox-custom" name="checkbox-4" input type="checkbox" value="450" onClick="test(this);" />
<label for="checkbox-4" class="checkbox-custom-label">R$ 450</label>
</li>
<li>
<input id="checkbox-5" class="checkbox-custom" name="checkbox-5" input type="checkbox" value="650" onClick="test(this);" />
<label for="checkbox-5" class="checkbox-custom-label">R$ 650</label>
</li>
<li>
<input id="checkbox-6" class="checkbox-custom" name="checkbox-6" type="checkbox" value="500" onClick="test(this);" />
<label for="checkbox-6" class="checkbox-custom-label">R$ 500</label>
</li>
<li>
<input id="checkbox-7" class="checkbox-custom" name="checkbox-7" input type="checkbox" value="120" onClick="test(this);" />
<label for="checkbox-7" class="checkbox-custom-label">R$ 120</label>
</li>
<li>
<input id="checkbox-8" class="checkbox-custom" name="checkbox-8" input type="checkbox" value="350" onClick="test(this);" />
<label for="checkbox-8" class="checkbox-custom-label">R$ 350</label>
</li>
<li>
<input id="checkbox-9" class="checkbox-custom" name="checkbox-9" input type="checkbox" value="450" onClick="test(this);" />
<label for="checkbox-9" class="checkbox-custom-label">R$ 450</label>
</li>
<li>
<input id="checkbox-10" class="checkbox-custom" name="checkbox-10" input type="checkbox" value="650" onClick="test(this);" />
<label for="checkbox-10" class="checkbox-custom-label">R$ 650</label>
</li>
<li>
<input id="checkbox-11" class="checkbox-custom" name="checkbox-11" input type="checkbox" value="650" onClick="test(this);" />
<label for="checkbox-11" class="checkbox-custom-label">R$ 650</label>
</li>
<li>
<input id="checkbox-12" class="checkbox-custom" name="checkbox-12" input type="checkbox" value="650" onClick="test(this);" />
<label for="checkbox-12" class="checkbox-custom-label">R$ 650</label>
</li>
</ul>
<br>
Total: R$ <span id="Totalcost"></span>
</div>
</body>
</html>Change your function to this
<script type="text/javascript">
var total = 0;
var radioAmount = 0;
function test(item){
if (item.type === 'radio') {
radioAmount = parseInt(item.value);
} else {
if(item.checked){
total+= parseInt(item.value);
}
else{
total-= parseInt(item.value);
}
}
document.getElementById('Totalcost').innerHTML = (total + radioAmount) + "";
}
</script>
You need to keep your totals for your checkboxes and radio buttons separate.