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

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

Ou

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

Une telle chose existe-t-elle?

4085
tpower 9 janv. 2009 à 01:20

30 réponses

Meilleure réponse

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 au {{ X0}} et modifiez son .checked propriété:

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

L'avantage d'utiliser les méthodes .prop() et .attr() au lieu de cela est qu'elles fonctionneront sur tous les éléments correspondants.

JQuery 1.5.x et inférieur

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

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

Notez qu'il s'agit de 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'); car cette dernière, si la case a été initialement cochée, changera le comportement d'un appel en .reset() sur n'importe quel formulaire qui le contient - un changement de comportement subtil mais probablement indésirable.

Pour plus de contexte, une discussion incomplète des modifications apportées à la gestion de l'attribut / propriété checked dans la transition de 1.5.x à 1.6 peut être trouvée dans le notes de publication de la version 1.6 et la section Attributs vs. Propriétés de la section .prop() documentation.

5922
MultiplyByZer0 18 août 2019 à 19:04

C'est probablement la solution la plus courte et la plus simple:

$(".myCheckBox")[0].checked = true;

Ou

$(".myCheckBox")[0].checked = false;

Encore plus court serait:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

Voici également un jsFiddle .

15
Peter Mortensen 13 déc. 2014 à 16:46

Je manque la solution. J'utiliserai toujours:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
45
Peter Mortensen 13 déc. 2014 à 16:43

Lorsque vous avez coché une case comme;

$('.className').attr('checked', 'checked')

Cela pourrait ne pas suffire. Vous devez également appeler la fonction ci-dessous;

$('.className').prop('checked', 'true')

Surtout lorsque vous avez supprimé l'attribut checkbox.

13
Serhat Koroglu 5 mars 2015 à 13:10
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
16
mahmoh 16 juil. 2013 à 02:57

Une autre solution possible:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
20
Getz 21 juil. 2014 à 09:34

Essaye ça:

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking
30
Peter Mortensen 16 févr. 2013 à 10:33

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 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()
});
146
Peter Mortensen 29 déc. 2011 à 18:18

Ceci sélectionne les éléments qui ont l'attribut spécifié avec une valeur contenant la sous-chaîne donnée "ckbItem":

$('input[name *= ckbItem]').prop('checked', true);

Il sélectionnera tous les éléments qui contiennent ckbItem dans son attribut de nom.

51
Abou-Emish 18 juil. 2018 à 13:44

Voici le code pour coché et décoché avec un bouton:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

Mise à jour: Voici le même bloc de code utilisant la nouvelle méthode prop Jquery 1.6+, qui remplace attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});
31
MrBoJangles 11 avril 2017 à 15:55

Si vous utilisez PhoneGap pour le développement d'applications et que vous avez une valeur sur le bouton que vous souhaitez afficher instantanément, n'oubliez pas de fais ça

$('span.ui-[controlname]',$('[id]')).text("the value");

J'ai trouvé que sans la durée, l'interface ne sera pas mise à jour, quoi que vous fassiez.

25
Peter Mortensen 16 févr. 2013 à 10:32

Pour cocher et décocher

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
17
Theraot 3 déc. 2013 à 02:18

Dans jQuery,

if($("#checkboxId").is(':checked')){
    alert("Checked");
}

Ou

if($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

En JavaScript,

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}
10
Peter Mortensen 3 avril 2014 à 21:31

Le JavaScript simple est très simple et beaucoup moins de frais généraux:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

Exemple ici

14
Alex W 23 sept. 2013 à 01:12

Voici la réponse complète en utilisant jQuery

Je le teste et ça marche à 100%: D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $(':checkbox:checked').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });
11
user1477929user1477929 27 févr. 2013 à 15:49

Je n'ai pas pu le faire fonctionner en utilisant:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

Vrai et faux cocheraient la case. Ce qui a fonctionné pour moi, c'est:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
13
Mark Amery 15 déc. 2014 à 18:44

Voici un moyen de le faire sans jQuery

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>
37
Xitalogy 10 mai 2016 à 09:58

Comme l'a dit @ livefree75:

jQuery 1.5.x et versions antérieures

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

Mais dans les nouvelles versions de jQuery, nous devons utiliser quelque chose comme ceci:

jQuery 1.6+

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

Ensuite, vous pouvez simplement faire:

    $(":checkbox").check();
    $(":checkbox").uncheck();
19
Peter Mortensen 21 mai 2017 à 11:00

Soyez conscient des fuites de mémoire dans Internet Explorer avant Internet Explorer 9, comme La documentation jQuery indique:

Dans Internet Explorer avant la version 9, l'utilisation de .prop () pour définir une propriété d'élément DOM sur autre chose qu'une simple valeur primitive (nombre, chaîne ou booléen) peut provoquer des fuites de mémoire si la propriété n'est pas supprimée (à l'aide de .removeProp ( )) avant que l'élément DOM ne soit supprimé du document. Pour définir en toute sécurité des valeurs sur des objets DOM sans fuite de mémoire, utilisez .data ().

18
Peter Mortensen 22 nov. 2014 à 15:33

Voici le code et la démo pour savoir comment cocher plusieurs cases à cocher ...

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});
25
Joaquinglezsantos 10 févr. 2016 à 13:18

C'est la bonne façon de cocher et de décocher les cases à cocher avec jQuery, car c'est une norme multiplateforme, et permettra d'autoriser les reposts de formulaire.

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

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

En faisant cela, vous utilisez les normes JavaScript pour cocher et décocher les cases à cocher, donc tout navigateur qui implémente correctement la propriété "vérifié" de l'élément checkbox exécutera ce code sans problème. Ce devrait être tous les principaux navigateurs, mais je ne peux pas tester avant 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 modifications d'attribut "vérifié".

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

Violon

La solution:

En utilisant la propriété "vérifiée" de JavaScript sur les éléments DOM, nous sommes en mesure de résoudre le problème directement, au lieu d'essayer de manipuler le DOM à faire ce que nous voulons qu'il fasse.

Violon

Ce plugin va modifier la propriété vérifiée de tous les éléments sélectionnés par jQuery, et cocher et décocher avec succès les cases à cocher en toutes circonstances. Ainsi, bien que cela puisse sembler une solution excessive, cela améliorera l'expérience utilisateur de votre site et aidera à é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 souhaitez pas utiliser de plug-in, 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;
});
314
RevanthKrishnaKumar V. 31 juil. 2015 à 13:43

Nous pouvons utiliser elementObject avec jQuery pour faire vérifier l'attribut:

$(objectElement).attr('checked');

Nous pouvons l'utiliser pour toutes les versions de jQuery sans aucune erreur.

Mise à jour: Jquery 1.6+ a la nouvelle méthode prop qui remplace attr, par exemple:

$(objectElement).prop('checked');
29
MrBoJangles 11 avril 2017 à 15:53

Pour jQuery 1.6+

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

Pour jQuery 1.5.x et inférieur

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

Vérifier,

$('.myCheckbox').removeAttr('checked');
18
logan 21 avril 2015 à 10:29

En supposant que la question est ...

Comment puis-je vérifier un ensemble de cases à cocher PAR VALEUR?

N'oubliez pas que dans un ensemble de cases à cocher typique, toutes les balises d'entrée ont le même nom, elles diffèrent par l'attribut value : il n'y a pas d'ID pour chaque entrée de l'ensemble.

La réponse de Xian peut être étendue avec un sélecteur plus spécifique , en utilisant la ligne de code suivante:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
45
5 revs, 3 users 74% 9 juin 2014 à 15:07

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');
700
Peter Mortensen 18 mars 2015 à 18:34

Pour cocher une case, vous devez utiliser

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

Ou

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

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

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

Si tu fais

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

Il supprime l'attribut tous ensemble et donc vous ne pourrez 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.

NOUVELLE DÉMO 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');
    }
});
62
Peter Mortensen 29 déc. 2011 à 18:21

Si vous utilisez mobile et que vous souhaitez que l'interface se mette à jour et affiche la case à cocher comme décochée, utilisez ce qui suit:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");
18
Matt Peacock 11 janv. 2013 à 13:05

Pour cocher une case à l'aide de jQuery 1.6 ou version ultérieure, procédez comme suit:

checkbox.prop('checked', true);

Pour décocher, utilisez:

checkbox.prop('checked', false);

Voici ce que j'aime utiliser pour basculer une case à cocher à l'aide de jQuery:

checkbox.prop('checked', !checkbox.prop('checked'));

Si vous utilisez jQuery 1.5 ou une version antérieure:

checkbox.attr('checked', true);

Pour décocher, utilisez:

checkbox.attr('checked', false);
42
Ramon de Jesus 9 mai 2017 à 13:23
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

Le dernier déclenchera l'événement de clic pour la case à cocher, 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 déclencher, utilisez la dernière.

64
Chris Brandsma 3 févr. 2009 à 17:06

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

Ensuite, vous pouvez simplement faire:

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

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

80
livefree75 20 août 2010 à 18:19