2

hola supongamos que tengo este codigo:

function sumar() {
  // Asigno valor inicial de 0
  var v1 = 0;
  var v2 = 0;
  var v3 = 0;

  // Les cambio el valor si marche los checkbox
  if (document.getElementById("cb1").checked) {
    v1 = 10;
  }
  if (document.getElementById("cb2").checked) {
    v2 = 15;
  }
  if (document.getElementById("cb3").checked) {
    v3 = 20;
  }
  
  // Sumo las variables
  resultado = v1 + v2 + v3;
  
  // Envio el resultado a un label en html
  document.getElementById("total_label").innerHTML = resultado.toFixed(2);

}
<input type="checkbox" id="cb1">+ 10<br>
<input type="checkbox" id="cb2">+ 15<br>
<input type="checkbox" id="cb3">+ 20<br>

<button onclick="sumar()"> sumar </button><br>
<p><label id="total_label">0.00</label></p>

El problema es que mi codigo original tiene como 15 checkbox y creo que esta siendo demaciado inpractico tenerlos todos asi, hay alguna forma de hacer un arreglo con todos los checkbox o algo asi?

me serviria de mucho su ayuda :b

0

2 respuestas 2

2

La opción más viable es ponerle una clase específica todos los input, lo cual hará que podamos acceder a todos ellos con , usando querySelectorAll

Este método nos devuelve una lista de nodos, los cuales podemos recorrer con forEach

Document: <p>Hello world</p>
Input: document.querySelectorAll("p");
Output: NodeList(1) [p]

Si no quieres colocarle una clase, puedes directamente obtener todos los input que sean checkbox

function sumar() {
  let resultado = 0;
  document.querySelectorAll("input[type=checkbox]") /* Cambiar el selector a ".clase" si se usa una clase */.forEach((el,i) => {
    const valores = [10, 15, 20]; // Valores a sumar por cada checkbox
    if (el.checked) {
      resultado += valores[i]; // Obtener los valores seleccionados
    }
  });
  document.getElementById("total_label").innerHTML = resultado.toFixed(2);
}
<input class="box" type="checkbox" id="cb1">+ 10<br>
<input class="box" type="checkbox" id="cb2">+ 15<br>
<input class="box" type="checkbox" id="cb3">+ 20<br>

<button onclick="sumar()"> sumar </button><br>
<p><label id="total_label">0.00</label></p>

1
  • este esta bueno creo que si entiendo que hace cada cosa voy a probar a hacer algo asi muchas gracias :) Commented el 5 mar. 2021 a las 1:13
1

Puedes crear las casillas de selección dinámicamente a partir de un arreglo; incluso agregar el valor como un atributo. Y al momento de sumar lo sigues manejando como arreglo, pero de casillas.

document.addEventListener("DOMContentLoaded",
    function(event){
        [10,15,20].forEach(
            function(num){
                var chk = document.createElement("input");
                chk.type = "checkbox"
                chk.name = "cb[]";
                chk.setAttribute("int-val", num);
                chk.addEventListener('change',function(){sumar();});

                var div = document.getElementById("checkboxes");
                div.appendChild( chk );
                div.appendChild( document.createTextNode("+"+num) );
                div.appendChild( document.createElement("br") );                
            }
        );
    }
);

function sumar() {
    var resultado = 0;
    document.getElementsByName("cb[]").forEach(
        function(cb){
            if(cb.checked)
                resultado += parseInt(cb.getAttribute("int-val"));
        }
    );
    
    document.getElementById("total_label").innerHTML = resultado.toFixed(2);
}
<div id="checkboxes"></div>
<p><label id="total_label">0.00</label></p>

1
  • omg!! no lo habia visto es genial, y puedo añadir los checkbox directo en [10,15,20,60,80].forEach( esta muy padre investigare bien como funciona todo, muchas gracias :) Commented el 8 mar. 2021 a las 16:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.