var productos = document.querySelectorAll("[type=checkbox]"),
medidas = document.querySelectorAll("[type=radio]"),
salida = document.querySelector("#resultado"),
total = 0,
fijo = 90500,
acumulado = 0,
radioMarcado = null,
calcular = function(){
if (!document.querySelectorAll("[type=checkbox]:checked").length){
total = 0;
}
else{
radioMarcado = document.querySelectorAll("[type=radio]:checked")[0];
total = (fijo / 7) * Number(radioMarcado.value) + acumulado;
}
salida.innerHTML = "Total: US$" + total.toFixed(2);
};
[].forEach.call(productos, function(producto){
producto.addEventListener("click", function(){
if (this.checked) acumulado += Number(this.value);
else acumulado -= Number(this.value);
calcular();
}, false);
});
[].forEach.call(medidas, function(medida){
medida.addEventListener("click", calcular, false);
});
<section id = "productos">
<h3>Productos</h3>
<div class = "producto">
<label for = "remera">Remera</label>
<input type = "checkbox" id = "remera" name = "remera" value = "25.95" />
</div>
<div class = "producto">
<label for = "zapatos">Zapatos</label>
<input type = "checkbox" id = "zapatos" name = "zapatos" value = "48.75" />
</div>
<div class = "producto">
<label for = "lentes">Lentes</label>
<input type = "checkbox" name = "lentes" value = "22.30" />
</div>
</section>
<section id = "medidas">
<h3>Medidas</h3>
<label for = "uno">5.98</label>
<input type = "radio" id = "uno" name = "medida" value = "5.98" checked />
<label for = "dos">8.23</label>
<input type = "radio" id = "dos" name = "medida" value = "8.23" />
<label for = "tres">10.43</label>
<input type = "radio" id = "tres" name = "medida" value = "10.43" />
</section>
<span id = "resultado">Total: US$0.00</span>
body{
background: steelblue;
}
#productos, #medidas{
width: 30%;
border-radius: .25rem;
}
#productos{
background: lightyellow;
}
#medidas{
background: lightcyan;
margin-bottom: 2.5%;
}
#resultado{
background: aquamarine;
font-size: 1.5rem;
border-radius: .25rem;
}
h3{
color: navy;
}
#productos label{
color: midnightblue;
}
#medidas label{
color: darkblue;
}