Listener CheckBox

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.

1
задан 14.12.2016, 17:38
3 ответа

Ты можешь пытаться с этим, так как тебе нужно, чтобы любой из этих 3 checkbox, последний else мне показался ненужным.

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
ответ дан 24.11.2019, 12:05

Ответ пользователя siosi стоится и функциональный, но если бы ты захотел решить это, не изменяя твоего markup, ты мог бы делать это следующей формой:

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

В случае, если ты будешь хотеть, чтобы это функционировало для более чем одного checkbox, одновременно ты был бы должен изменять условных следующей формы:

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();
    }
}
1
ответ дан 24.11.2019, 12:05

Доказательство добавляя драйвер событий, который получал бы стоимость id объекта, который инициализировал событие, использовать что-то как

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

  if(checkbox !== id) {
   //Tu condicion de id
}
0
ответ дан 24.11.2019, 12:05

Теги

Похожие вопросы