Radio values from different groups are changing instead of summing. (with snippet)

Question

I certain messed up something with the script, and really need help here. I'm trying to learn by my own studying at house for future applications on a website.

As the title stated I'm having problems summing radio values. They are changing instead of adding as you can see on "total". The sum relation with radio + checkboxes are working without problems, but radio + radio are not working.

See my snippet, please!

html, body {
    height: 100%;
    margin: 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: red;
}
.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    background: red;
}

.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%;
}
hr {
  height: 10px;
  border: 0;
  box-shadow: 0 10px 10px -10px #8c8c8c inset;
  color:red;
  margin-right: 20px;
  margin-left: 10px;
}

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test Radio Checkbox</title>
<link href="testeradio.css" rel="stylesheet" type="text/css" />

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

</head>

<body>

<br>

<font color="rebeccapurple" font face="Arial" size="2">
<b>Abaixo, voce devera marcar informacoes relativas ao seu negocio e tambem os servicos especificos que deseja.</b></font>
<br>
<font color="Red" font face="Arial" size="2"><b>Ao clicar nos itens, o valor referente a eles sera adicionado ao "Total".</b></font>

<br>
<br>
<hr>


<font face="Arial, Helvetica, sans-serif""" color="rebeccapurple" size="2">

<b>Marque abaixo a quantidade media de notas fiscais emitidas pela sua empresa:</b>

</font>

<br>
<br>

<font face="Arial, Helvetica, sans-serif" color="black" size="2">

<input id="radio-1" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this);" />
<label for="radio-1" class="radio-custom-label">Até 30</label>

<input id="radio-2" class="radio-custom" name="radio-group" type="radio" value="1000" onClick="test(this);" />
<label for="radio-2" class="radio-custom-label">Até 60</label>

<input id="radio-3" class="radio-custom" name="radio-group" type="radio" value="1800" onClick="test(this);" />
<label for="radio-3" class="radio-custom-label">Até 90</label>

<input id="radio-4" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this);" />
<label for="radio-4" class="radio-custom-label">até 120</label>

<input id="radio-5" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this);" />
<label for="radio-5" class="radio-custom-label">120 ou mais</label>

</font>

<br>
<br>

<font face="Arial, Helvetica, sans-serif""" color="rebeccapurple" size="2">

<b>Marque abaixo a quantidade de contas bancarias que sua empresa possui:</b>

</font>

<br>
<br>

<font face="Arial, Helvetica, sans-serif" color="black" size="2">

<input id="radio-6" class="radio-custom" name="radio-group2" type="radio" value="100" onClick="test(this);" />
<label for="radio-6" class="radio-custom-label">1</label>

<input id="radio-7" class="radio-custom" name="radio-group2" type="radio" value="200" onClick="test(this);" />
<label for="radio-7" class="radio-custom-label">2</label>

<input id="radio-8" class="radio-custom" name="radio-group2" type="radio" value="300" onClick="test(this);" />
<label for="radio-8" class="radio-custom-label">3</label>

<input id="radio-9" class="radio-custom" name="radio-group2" type="radio" value="400" onClick="test(this);" />
<label for="radio-9" class="radio-custom-label">4</label>

<input id="radio-10" class="radio-custom" name="radio-group2" type="radio" value="500" onClick="test(this);" />
<label for="radio-10" class="radio-custom-label">5</label>

<input id="radio-11" class="radio-custom" name="radio-group2" type="radio" value="600" onClick="test(this);" />
<label for="radio-11" class="radio-custom-label">6</label>

<input id="radio-12" class="radio-custom" name="radio-group2" type="radio" value="700" onClick="test(this);" />
<label for="radio-12" class="radio-custom-label">7 ou mais </label>

</font>

<br>
<br>

<font face="Arial, Helvetica, sans-serif""" color="rebeccapurple" size="2">

<b>Marque abaixo quantos funcionarios e socios sua empresa possui:</b>

</font>

<br>
<br>

<font face="Arial, Helvetica, sans-serif" color="black" size="2">

<input id="radio-13" class="radio-custom" name="radio-group3" type="radio" value="500" onClick="test(this);" />
<label for="radio-13" class="radio-custom-label">1</label>

<input id="radio-14" class="radio-custom" name="radio-group3" type="radio" value="600" onClick="test(this);" />
<label for="radio-14" class="radio-custom-label">2 a 4</label>

<input id="radio-15" class="radio-custom" name="radio-group3" type="radio" value="700" onClick="test(this);" />
<label for="radio-15" class="radio-custom-label">5 a 9</label>

<input id="radio-16" class="radio-custom" name="radio-group3" type="radio" value="700" onClick="test(this);" />
<label for="radio-16" class="radio-custom-label">10 a 15</label>

<input id="radio-17" class="radio-custom" name="radio-group3" type="radio" value="700" onClick="test(this);" />
<label for="radio-17" class="radio-custom-label">16 a 30</label>

<input id="radio-18" class="radio-custom" name="radio-group3" type="radio" value="700" onClick="test(this);" />
<label for="radio-18" class="radio-custom-label">31 a 50</label>

</font>

<br>
<br>


<font face="Arial, Helvetica, sans-serif""" color="rebeccapurple" size="2">

<b>Marque abaixo os servicos especificos que voce deseja:</b>

</font>

<br>

<font face="Arial, Helvetica, sans-serif" color="black" size="2">

<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">Balancete</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">Centro</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">Relatorio</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">RAIS</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">DBE</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">CAGED</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">DACON</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">DITR</label>
</li>

</ul>
</font>

<br><br><br><br>

<font face="Arial, Helvetica, sans-serif""" color="rebeccapurple" size="4">
<b>Total Orçado:</b></font><b><font face="Arial, Helvetica, sans-serif""" color="red" size="5"> R$ <span id="Totalcost"></span></font></b>

<br><br><br>

</body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 12:24

You would need to have 3 seperate variables for the 3 groups of radio buttons based on the code you currently have. A quick and easy way to do this based on your code is to check the name of the radio button to see what group it is in.

if (item.type === 'radio') {
  if (item.name === 'radio-group') radioAmount1 = parseInt(item.value);
  if (item.name === 'radio-group2') radioAmount2 = parseInt(item.value);
  if (item.name === 'radio-group3') radioAmount3 = parseInt(item.value);
} else {
  if(item.checked){
    total+= parseInt(item.value);
  }
  else {
    total-= parseInt(item.value);
  }
}      

document.getElementById('Totalcost').innerHTML = 
  (total + radioAmount1 + radioAmount2 + radioAmount3) + "";
}

There are better ways to do this though, see here for more solutions: How to get value of selected radio button?

score 0 · Answer 2 · answered Feb 14 '17 at 17:52

You cannot add condition if you have multiple radios. so try this if you want.

     function test(item){

         if (item.type === 'radio') {
            radioAmount=0;
            var radio=document.getElementsByClassName("radio-custom");
            var length=radio.length;
            for(var i=0; i<length ;i++)
               radioAmount+=parseInt(radio[i].checked?radio[i].value:0);

        } else {
            if(item.checked){
                total+= parseInt(item.value);
            }
            else{
                total-= parseInt(item.value);
            }
        }

  document.getElementById('Totalcost').innerHTML =(total+radioAmount)+"";
    }

Radio values from different groups are changing instead of summing. (with snippet)

2 Answers2