Question Définir "cochée" pour une case à cocher avec jQuery?


Je voudrais faire quelque chose comme ça pour cocher une checkbox en utilisant jQuery:

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

ou

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

Est-ce qu'une telle chose existe?


3595
2018-01-08 22:20


origine


Réponses:


jQuery 1.6+

Utilisez le nouveau .prop() méthode:

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

jQuery 1.5.x et ci-dessous

le .prop() méthode n'est pas disponible, vous devez donc utiliser .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 d'utiliser

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

puisque ce dernier, si la case a été initialement cochée, change le comportement d'un appel à .reset() sur n'importe quelle forme qui le contient - un changement de comportement subtil mais probablement importun.

Pour plus de contexte, une discussion incomplète sur les changements dans la gestion du checked attribut / propriété dans la transition de 1.5.x à 1.6 peut être trouvé dans le Notes de version de la version 1.6 et le Attributs ou propriétés section de .prop() Documentation.

Toute version de jQuery

Si vous travaillez avec un seul élément, vous pouvez toujours modifier le HTMLInputElementde .checked propriété:

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

L'avantage d'utiliser le .prop() et .attr() méthodes à la place de cela est qu'ils fonctionneront sur tous les éléments appariés.


5402
2018-01-08 22:25



Utilisation:

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

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

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

622
2018-01-08 22:25



C'est la manière correcte de cocher et décocher les cases à cocher avec jQuery, car il s'agit d'une norme multiplateforme, et volonté autoriser les reposts de formulaire.

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

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

En faisant cela, vous utilisez des standards JavaScript pour cocher et décocher les cases à cocher, donc tout navigateur qui implémente correctement la propriété "checked" de l'élément checkbox exécutera ce code parfaitement. Ce devrait être tous les principaux navigateurs, mais je suis incapable de tester précédent à Internet Explorer 9.

Le problème (jQuery 1.6):

Une fois qu'un utilisateur clique sur une case à cocher, cette case à cocher cesse de répondre aux changements d'attributs "vérifiés".

Voici un exemple de l'attribut checkbox qui échoue à faire le travail après que quelqu'un a cliqué la case à cocher (cela arrive dans Chrome).

Violon

La solution:

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

Violon

Ce plugin modifie la propriété checked de tous les éléments sélectionnés par jQuery, et vérifie et décoche les cases à cocher dans toutes les circonstances. Donc, même si cela peut sembler être une solution de rechange, cela améliorera l'expérience utilisateur de votre site et contribuera à éviter 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 );

Alternativement, si vous ne voulez pas utiliser un plugin, vous pouvez 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;
});

284
2018-05-06 19:31



Tu peux faire

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

ou

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

Si vous avez du code personnalisé dans l'événement onclick pour la case à cocher que vous souhaitez utiliser, utilisez celui-ci à la place:

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

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

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

Vous pouvez cocher toutes les cases comme ceci:

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

129
2018-01-08 22:24



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 vous pouvez simplement faire:

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

Ou vous pouvez leur donner plus de noms uniques comme mycheck () et myuncheck () au cas où vous utilisez une autre bibliothèque qui utilise ces noms.


67
2017-08-20 18:19



$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

Le dernier déclenchera l'événement click pour la case, les autres ne le feront pas. Donc, si vous avez du code personnalisé dans l'événement onclick pour la case à cocher que vous souhaitez utiliser, utilisez le dernier.


58
2018-01-08 22:36



Pour cocher une case, vous devez utiliser

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

ou

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

et pour décocher une case à cocher, vous devez toujours la définir sur false:

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

Si tu fais

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

il supprime tous les attributs et vous ne pourrez donc pas réinitialiser le formulaire.

BAD DEMO jQuery 1.6. Je pense que c'est cassé. Pour 1.6 je vais faire un nouveau post à ce sujet.

NOUVEAU DEMO DE TRAVAIL jQuery 1.5.2 fonctionne dans Chrome.

Les deux démos utilisent

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

56
2018-03-23 15:22