Entrar

Ayuda! Necesito sumar los valores de los Checkbox seleccionados con Javascript

Andrés98 · · Solicitar retirada
Hola!
Amigos, necesito sumar los valores de los checkbox seleccionados utilizando Javascript. Lo cierto es que no manejo mucho ese lenguaje, podría hacerlo en PHP pero debe ser exclusivamente en Javascript. He logrado crear una función que sume todos los valores y muestre el resultado con una alerta, pero solo necesito la suma de los valores seleccionados en pantalla, de modo que pueda utilizar la variable suma más adelante para otras tareas.
No sé si me explico bien, de cualquier forma adjunto una imagen explicativa y mi código HTML sin la función. Si me pueden ayudar les estaré muy agradecido!

<!DOCTYPE html>
<html>
<head>
<title></title>
<script languague="javascript">
function mostrar() {
div = document.getElementById('flotante');
div.style.display = '';
}

function cerrar() {
div = document.getElementById('flotante');
div.style.display = 'none';
}
</script>
<script languague="javascript">
function mostrar1() {
div = document.getElementById('flotante1');
div.style.display = '';
}

function cerrar1() {
div = document.getElementById('flotante1');
div.style.display = 'none';
}
</script>
</head>
<body>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="jumbotron">
<h1>Prueba</h1>
</div>
<select id="seleccion" class="estilo" onchange="seleccion()">

<option id="blanco"></option>
<option id="opcion1">PPP</option>
<option id="opcion2">PVP</option>

</select>
</div>

<div class="col-md-4 col-md-offset-4">
<p id="blanco1" class="parrafo">Elige una opción por favor.</p>
<p id="texto1" class="parrafo"><a href="javascript:mostrar();">Seleccionar un Set</a></p>
<p id="texto2" class="parrafo"><a href="javascript:mostrar1();">Seleccionar una Pieza</a></p>
</div>
</div>

<div id="flotante" style="display:none;">
<div id="close"><a href="javascript:cerrar();">Cerrar Sets</a></div>
<input type="checkbox" name="Bar" id="1" value="6200"> Set de 7 Piezas<br>
<input type="checkbox" name="Bar" value="9300"> Set de 10 Piezas<br>
<input type="checkbox" name="Bar" value="13900" checked> Set de 15 Piezas<br>
</div>

<div id="flotante1" style="display:none;">
<div id="close"><a href="javascript:cerrar1();">Cerrar Piezas</a></div>
<input type="checkbox" name="Bar" id="2" value="2570"> Paellera<br>
<input type="checkbox" name="Bar" value="450"> Hervidor<br>
<input type="checkbox" name="Bar" value="300"> Cacerola<br>
</div>

<script type="text/javascript">
document.getElementById("texto1").style.display = "none";
document.getElementById("texto2").style.display = "none";
</script>

<script type="text/javascript">
document.getElementById("texto1").style.display = "none";
document.getElementById("texto2").style.display = "none";

function seleccion() {

if (document.getElementById("blanco").selected == true) {
document.getElementById("texto1").style.display = "none";
document.getElementById("texto2").style.display = "none";
document.getElementById("blanco1").style.display = "block";

}

if (document.getElementById("opcion1").selected == true) {

document.getElementById("texto2").style.display = "none";
document.getElementById("blanco1").style.display = "none";
document.getElementById("texto1").style.display = "block";


} else if (document.getElementById("opcion2").selected == true) {

document.getElementById("blanco1").style.display = "none";
document.getElementById("texto1").style.display = "none";
document.getElementById("texto2").style.display = "block";


} else if (document.getElementById("opcion3").selected == true) {

document.getElementById("blanco1").style.display = "none";
document.getElementById("texto1").style.display = "none";
document.getElementById("texto2").style.display = "none";


}
}
</script>

</body>
</html>