Définir le paramètre "checked" pour une case à cocher avec jQuery

Question

J'aimerais faire quelque chose comme ça pour cocher un checkbox en utilisant jQuery :

$(".myCheckBox").checked(true);

o

$(".myCheckBox").selected(true);

Une telle chose existe-t-elle ?

Answer 1

JQuery moderne

Utilisez .prop() :

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

API DOM

Si vous travaillez avec un seul élément, vous pouvez toujours accéder à l'élément sous-jacent. HTMLInputElement et modifier son .checked propriété :

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

L'avantage d'utiliser le .prop() y .attr() au lieu de cela, c'est qu'elles opèrent sur tous les éléments appariés.

jQuery 1.5.x et inférieur

El .prop() n'est pas disponible, vous devez donc utiliser la méthode .attr() .

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Notez que c'est l'approche utilisée par les tests unitaires de jQuery avant la version 1.6 et est préférable à l'utilisation de $('.myCheckbox').removeAttr('checked'); puisque ce dernier, si la case était initialement cochée, modifiera le comportement d'un appel à .reset() sur tout formulaire qui le contient - un changement de comportement subtil mais probablement malvenu.

Pour plus de contexte, une discussion incomplète des changements apportés au traitement de la checked dans la transition de la 1.5.x à la 1.6 se trouve dans l'onglet notes de publication de la version 1.6 et le Attributs et propriétés de la section .prop() documentation .

Answer 2

Utilisez :

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

Et si vous voulez vérifier si une case à cocher est cochée ou non :

$('.myCheckbox').is(':checked');

Answer 3

Il s'agit de la manière correcte d'activer et de désactiver les cases à cocher avec jQuery, car elle est standard sur toutes les plates-formes, et se autoriser les reposts de formulaires.

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

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

Ce faisant, vous utilisez les normes JavaScript pour cocher et décocher les cases à cocher, de sorte que tout navigateur qui implémente correctement la propriété "checked" de l'élément checkbox exécutera ce code sans problème. Ce site debe tous les principaux navigateurs, mais je ne suis pas en mesure de tester les versions antérieures à Internet Explorer 9.

Le problème (jQuery 1.6) :

Lorsqu'un utilisateur clique sur une case à cocher, celle-ci cesse de répondre aux modifications de l'attribut "coché".

Voici un exemple d'attribut de case à cocher qui ne fait pas son travail après que quelqu'un ait a cliqué sur la case à cocher (cela se produit dans Chrome).

Violon

La solution :

En utilisant la propriété "checked" de JavaScript sur la balise DOM nous sommes en mesure de résoudre le problème directement, au lieu d'essayer de manipuler le DOM pour qu'il fasse ce que nous voulons. veulent à faire.

Violon

Ce plugin modifiera la propriété checked de tout élément sélectionné par jQuery, et réussira à cocher et décocher les cases à cocher en toutes circonstances. Ainsi, bien que cette solution puisse sembler trop contraignante, elle améliorera l'expérience utilisateur de votre site et contribuera à prévenir la frustration des utilisateurs.

(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 );

Si vous ne souhaitez pas utiliser de plugin, vous pouvez également utiliser les extraits de code suivants :

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

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

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

Answer 4

Vous pouvez faire

$('.myCheckbox').attr('checked',true) //Standards compliant

o

$("form #mycheckbox").attr('checked', true)

Si vous avez un code personnalisé dans l'événement onclick de la case à cocher que vous voulez déclencher, utilisez celui-ci à la place :

$("#mycheckbox").click();

Vous pouvez décocher en supprimant entièrement l'attribut :

$('.myCheckbox').removeAttr('checked')

Vous pouvez cocher toutes les cases comme ceci :

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

Answer 5

Vous pouvez également étendre l'objet $.fn avec de nouvelles méthodes :

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Alors tu peux juste faire :

$(":checkbox").check();
$(":checkbox").uncheck();

Vous pouvez aussi leur donner des noms plus uniques comme mycheck() et myuncheck() au cas où vous utiliseriez une autre bibliothèque qui utilise ces noms.