1

Estoy realizando un js que responde a al momento de hacer click en un checkbox:

function actionCheckbox(){
    var chkAp = document.getElementById("ahorroAP");
    var chkCa2 = document.getElementById("ahorroCa2");
    var chkAhorro = document.getElementById("ahorroDep");

    if(chkApv.value){
        agregarAp();    
    }else if(chkCta2.value){
        agregarPlanCa2();
    }else if(chkAhorroDeposito.value){
        agregarAhorroDep();
    }else{
        cleanfields();
    }           
}

El problema es que cuando hago click en el segundo chkbox ahorroCa2, se ejecuta solo el primer if.

Objetivo

Mi objetivo es hacer un listener que obtenga el evento click de cualquiera de esos 3 checkbox para que se ejecute el if que corresponde.

2
  • Así como esta tu pregunta el error es irreproducible. Intenta crear un ejemplo mínimo verificable.
    – Marcos
    el 14 dic. 2016 a las 15:02
  • El nombre de las variables que has creado y las que evalúas en los if son diferentes. ¿Así debe ser?
    – Garrizano
    el 14 dic. 2016 a las 15:09

3 respuestas 3

1

Puedes probar con eso, ya que necesitas que cualquiera de esos 3 checkbox, el ultimo else lo veo innecesario.

function handleClick(cb) {
  if(cb.id == 'ahorroAP' && cb.checked){
  	 //agregarAp(); 
     console.log("primer checkbox");
  } else if(cb.id == 'ahorroCa2' && cb.checked){
  	//agregarPlanCa2();
     console.log("segundo checkbox");
  } else if(cb.id == 'ahorroDep' && cb.checked){
  	 //agregarAhorroDep();
     console.log("tercer checkbox");
  }
}
<input type="checkbox" onclick='handleClick(this);'  id="ahorroAP"> ahorroAP<br>
<input type="checkbox" onclick='handleClick(this);'  id="ahorroCa2"> ahorroCa2<br>
<input type="checkbox" onclick='handleClick(this);'  id="ahorroDep"> ahorroDep<br>

1

La respuesta de el usuario siosi es valida y funcional pero si quisieras solucionarlo sin modificar tu markup podrias hacerlo de la siguiente forma:

function actionCheckbox(){
    var chkAp = document.getElementById("ahorroAP");
    var chkCa2 = document.getElementById("ahorroCa2");
    var chkAhorro = document.getElementById("ahorroDep");

    if(chkAp.checked){
        agregarAp();    
    }else if(chkCa2.checked){
        agregarPlanCa2();
    }else if(chkAhorro.checked){
        agregarAhorroDep();
    }else{
        cleanfields();
    }           
}

En caso de que quieras que esto funcione para mas de un checkbox a la vez deberias modificar los condicionales de la siguiente forma:

function actionCheckbox(){
    var chkAp = document.getElementById("ahorroAP");
    var chkCa2 = document.getElementById("ahorroCa2");
    var chkAhorro = document.getElementById("ahorroDep");
    var executed = false;
    if(chkAp.checked){
        agregarAp();    
        executed = true;
    }
    if(chkCa2.checked){
        agregarPlanCa2();
        executed = true;
    }
    if(chkAhorro.checked){
        agregarAhorroDep();
        executed = true;
    }

    if (executed == false){
        cleanfields();
    }
}
0

Prueba agregando un manejador de eventos que obtenga el valor de id del objeto que inicio el evento, usar algo como

function eventHandler(evt) {
  let checkbox = evt.currentTarget.id;

  if(checkbox !== id) {
   //Tu condicion de id
 }
}

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.