¿Cómo agregar una clase a un elemento jQuery si una condición es verdadera y eliminar la misma clase si la condición es falsa?

Preguntas jQuery
⏰ 2 minutos de lectura

¿Hay una forma más corta de hacer lo siguiente?

var select_all_checkbox = $("input.select_all");
var is_checked = select_all_checkbox.prop("checked");

if (is_checked) {
    select_all_checkbox.parent().addClass("selected");
} else {
    select_all_checkbox.parent().removeClass("selected");
}

Usar toggleClasspasando un segundo argumento (un booleano) que especifica si la clase debe agregarse o no:

select_all_checkbox.parent().toggleClass("selected", is_checked);

Si tiene varios elementos seleccionados por input.select_alltienes que iterar sobre ellos sin embargo:

$("input.select_all").each(function() {
    $(this).parent().toggleClass('selected', this.checked);
});

  • Realmente no conduce al mismo efecto.

    – Arsenio

    07/04/2014 a las 23:37

  • Creo que OP está esperando el is_checked booleano para actualizarse automáticamente. Tal vez desee actualizar el booleano cada vez que se cambie la casilla de verificación, a través de la .change() evento…

    – terry

    7 abr 2014 a las 23:39

  • Porque toggleClass siempre agregará la clase si no está presente y la eliminará de lo contrario. Los métodos addClass/removeClass, por el contrario, no realizarán cambios en las clases del elemento si addClass se ejecuta en un elemento que ya tiene la clase (o si removeClass se ejecuta en un elemento que no tiene la clase).

    – Arsenio

    07/04/2014 a las 23:40

  • @aruseni: Tal vez no fui lo suficientemente claro: si pasa el estado como segundo argumento y es true, toggleClass agregará las clases. Si el estado es false, toggleValue eliminará las clases. Eso es exactamente lo mismo que llamar addClass cuando el estado es true y removeClass cuando el estado es false. toggleClass no es alternar alternativamente las clases cuando se pasa un estado como segundo argumento.

    – Félix Kling

    8 de abril de 2014 a las 1:06

  • Guau. En realidad, tienes razón, eso funciona como se esperaba. ¡Muchos gracias!

    – Arsenio

    8 de abril de 2014 a las 3:31

¡Absolutamente! Puede elegir entre los métodos (addClass/removeClass) mediante programación y usar el que se devuelve cuando se ejecuta una expresión.

Como esto:

var select_all_checkbox = $("input.select_all");
var is_checked = select_all_checkbox.prop("checked");

select_all_checkbox.parent()[is_checked ? "addClass" : "removeClass"]("selected");

  • Aquí está en coffeescript: $(‘.some-selector’)[if isChecked then ‘addClass’ else ‘removeClass’] ‘seleccionado’

    –Rui Nunes

    2 de junio de 2016 a las 10:59

  • aunque no tan limpio como usar toggleClasseste es un método bastante bueno, no obstante

    – woojoo666

    18 de diciembre de 2018 a las 12:27

¿Ha sido útil esta solución?