0

Actualmente tuve un problema con una librería que no reconocía el checklist y no tuve otra mas que hacer un propio checklist

Tengo una lista dentro de una tabla así:

<td><span class="checked fa fa-square-o"></span> lista 1</td>
<td><span class="checked fa fa-square-o"></span> lista 2</td>
<td><span class="checked fa fa-square-o"></span> lista 3</td>
<td><span class="checked fa fa-square-o"></span> lista 4</td>
<td><span class="checked fa fa-square-o"></span> lista 5</td>

Eso muestra un checklist no marcado pero esta con una fuente ( font awesome 4 ) y en el javascript hago lo siguiente usando jQuery:

var i = 0;
$(".checked").click(function(){
  if(i==0){
    $(this).addClass('fa-check-square-o');
    $(this).removeClass('fa-square-o');
    i++
  }else{
    $(this).addClass('fa-square-o');
    $(this).removeClass('fa-check-square-o');
    i=0;
  }
});

Funciona bien para el primero, pero sucede es que si marco el primero y luego quiero marcar el segundo tengo que hacer doble click para que se marque y así con el siguiente y el siguiente. ¿Hay manera de que no ocurra esto?

1 respuesta 1

2

El problema es tu variable i. Intenta verificar primero la clase del span, y de acuerdo a su valor, cambiarlo:

$(".checked").click(function(){
  if($(this).hasClass('fa-square-o')){
    $(this).removeClass('fa-square-o');
    $(this).addClass('fa-check-square-o');
  }else{
    $(this).removeClass('fa-check-square-o');
    $(this).addClass('fa-square-o');
  }
});

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.