2

Encontré un caso en el que jQuery NO funciona asignándole una función tipo "arrow" pero luego de un rato me di cuenta que sí lo hace con una función tradicional "anónima" ¿Alguien sabe por que?

Éste es el código usando Arrow Function: Siempre imprime en consola "Está desactivado"

$(document).ready(function(){
                              
    $(".my_checkbox").change(() => {         
        if($(this).is(":checked")) {
            console.log("Está activado");  
        } else {  
            console.log("Está desactivado");  
        }                      
     });
          
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="checkbox" name="check01" value="01" class="my_checkbox">Uno
<input type="checkbox" name="check02" value="02" class="my_checkbox">Dos
<input type="checkbox" name="check02" value="03" class="my_checkbox">Tres

Y aquí el código mendiante función anónima tradicional: Funciona tal como lo esperaba

$(document).ready(function(){

    $(".my_checkbox").change(function(){         
        if($(this).is(":checked")) {
            console.log("Está activado");  
        } else {  
            console.log("Está desactivado");  
        }                      
     });
     
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="checkbox" name="check01" value="01" class="my_checkbox">Uno
<input type="checkbox" name="check02" value="02" class="my_checkbox">Dos
<input type="checkbox" name="check02" value="03" class="my_checkbox">Tres

Los probé tanto en Firefox 84.0.2 (64-bit) como Chrome 87.0.4280.141 (Official Build) (64-bit)

0

1 respuesta 1

2

Esto se puede deber a que estás tratando de usar this en una función flecha

En funciones flecha, this no es tomado en cuenta, ya que estas fueron diseñadas originalmente para recibir datos y no obtener un this, en cambio las funciones con function si toman this, al ser una función anónima, está sigue siendo una función, sin embargo, si usas, por ejemplo, this.abc dentro de una función, esta se convertirá en una clase.

Para solucionar esto, puedes usar un simple .each()

jQuery(document).ready(() => {

  jQuery(".my_checkbox").each((i, el) => {         
    $(el).on("change", () => {
      if(jQuery(el).is(":checked")) {
        console.log("Está activado");  
      } else {  
        console.log("Está desactivado");  
      }                      
    });
  });
     
});
<input type="checkbox" name="check01" value="01" class="my_checkbox">Uno
<input type="checkbox" name="check02" value="02" class="my_checkbox">Dos
<input type="checkbox" name="check02" value="03" class="my_checkbox">Tres
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

2
  • Muchas gracias por tu respuesta, me hace mucho sentido lo que comentas respecto de "this" .. sin embargo, el uso de each() así tal como lo sugieres no me funcionó .. alguna otra sugerencia ? Commented el 13 ene. 2021 a las 2:51
  • Trata cambiando la línea del each a un document.querySelectorAll(".my_checkbox").forEach(el => {
    – Rodrigo
    Commented el 13 ene. 2021 a las 9:27

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.