Saltar al contenido

javascript: configuración de «marcado» para una casilla de verificación con jQuery

octubre 21, 2021
apple touch icon@2

Esta es la forma correcta de marcar y desmarcar casillas de verificación con jQuery, ya que es un estándar multiplataforma, y voluntad permitir reposiciones de formularios.

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

Al hacer esto, está utilizando estándares de JavaScript para marcar y desmarcar casillas de verificación, por lo que cualquier navegador que implemente correctamente la propiedad «marcada» del elemento de casilla de verificación ejecutará este código sin problemas. Esta deberían ser todos los principales navegadores, pero no puedo realizar pruebas anteriores a Internet Explorer 9.

El problema (jQuery 1.6):

Una vez que un usuario hace clic en una casilla de verificación, esa casilla de verificación deja de responder a los cambios de atributos «marcados».

A continuación, se muestra un ejemplo del atributo de casilla de verificación que no realiza el trabajo después de que alguien clickeado la casilla de verificación (esto sucede en Chrome).

Violín

La solución:

Mediante el uso de la propiedad «comprobada» de JavaScript en el DOM elementos, podemos resolver el problema directamente, en lugar de intentar manipular el DOM para que haga lo que querer que hacer.

Violín

Este complemento alterará la propiedad marcada de cualquier elemento seleccionado por jQuery, y marcará y desmarcará con éxito las casillas de verificación en todas las circunstancias. Por lo tanto, si bien esto puede parecer una solución abrumadora, mejorará la experiencia del usuario de su sitio y ayudará a evitar la frustración del usuario.

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

Alternativamente, si no desea utilizar un complemento, puede utilizar los siguientes fragmentos de código:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});
close