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