Si la casilla está marcada, agrega la clase al elemento padre

Tengo una mesa con casillas de verificación con este aspecto:

 

Lo que quiero hacer es cuando la checkbox está marcada para aplicar una clase “seleccionada” a “table-col”.

 if ($('.table-col').find(':checked')) { $(this).parent().parent().addClass('selected'); } 

Miré muchas publicaciones con una solución similar a la anterior pero no me parece que funcione. No estoy seguro de por qué, pero esto apunta a HTMLDocument no al elemento.

(Editar) En esta página habrá marcadas casillas de verificación, aquellas que quiero aplicar “seleccionadas”. En los comentarios @cimmanon mencionó el manejo del evento. Tendré que buscar esto. Gracias por las respuestas también!

(editar)

  

Entonces, después de las cargas de página, habrá casillas marcadas (creo que siempre contendrán casillas de verificación check = “checked” – no estoy seguro). Estos son los que necesitan un nuevo estilo. No hay necesidad de interactuar haciendo clic en ellos y aplicando un estilo, pero de todos modos es muy bueno.

Prueba esto…

 $(":checkbox").on('click', function(){ $(this).parent().toggleClass("checked"); }); 

Ejemplo

Saludos.

Puede usar .change() para enlazar con el evento de change ; luego, use .closest() y .toggleClass() para agregar o eliminar el nombre de clase selected del elemento grandparent.

 $("input:checkbox").change(function(){ $(this).closest(".table-col").toggleClass('selected', this.checked); }); 

Véalo aquí.

Asigne un nombre a su checkbox para que jQuery pueda engancharlo:

 $('input[name=foo]').is(':checked') 

$ (esto) solo se referirá a su checkbox (para que pueda acceder a su abuelo según su código) cuando esté en un controlador de eventos invocado por haberlo asignado al elemento de checkbox como @cimmanon insinuado.

Por lo tanto, si asignó el controlador .change () a su checkbox, $ (esto) se referirá a su checkbox. Realmente puedes hacer esto en una línea porque probablemente quieras activar o desactivar la clase “seleccionada”:

  $(":checkbox").change(function () { $(this).parent().parent().toggleClass('selected'); }); 

De lo contrario, $ (esto) se refiere al control que provocó el evento, por ejemplo, si está ejecutando este código en respuesta a un controlador de clic de botón, $ (esto) se referirá al botón.