Mettre "coché" pour une case à cocher avec jQuery?

j'aimerais faire quelque chose comme ceci pour marquer un checkbox en utilisant jQuery :

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

ou

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

une telle chose existe?

3676
demandé sur Mogsdad 2009-01-09 01:20:24

30 réponses

jQuery 1.6+

utiliser la nouvelle .prop() méthode:

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

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 essais unitaires de jQuery avant la version 1.6 et est préférable à l'utilisation

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

puisque ce dernier va, si la case a été cochée initialement, changer le comportement d'un appel à .reset() sur toute forme qui le contient - un changement de comportement subtil mais probablement indésirable.

Pour plus de contexte, certains incomplète discussion des changements à la gestion de la checked attribut/propriété de la transition de la 1.5.x 1,6 peut être trouvé dans le version 1.6 notes de version et les attributs vs. propriétés section de la .prop() documentation .

toute version de jQuery

si vous travaillez avec un seul élément, vous pouvez toujours modifier le HTMLInputElement 's .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'ils opéreront sur tous les éléments assortis.

5481
répondu Xian 2018-04-29 17:27:36

utiliser:

$(".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');
637
répondu bchhun 2015-03-18 18:34:03

c'est la bonne façon de vérifier et de décocher les cases à cocher avec jQuery, car c'est la norme multiplateformes, et va permettre des reposts de formulaire.

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

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

ce faisant, vous utilisez les normes JavaScript pour vérifier et décocher les cases à cocher, de sorte que n'importe quel navigateur qui implémente correctement la propriété" vérifié " de l'élément de case à cocher exécutera ce code parfaitement. Ce devrait être tous les principaux navigateurs, mais je suis impossible de 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 changements d'attribut" vérifié".

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

Violon

La Solution:

en utilisant la propriété" coché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 dans faire ce que nous veulent il à faire.

Violon

ce plugin va Modifiez la propriété contrôlée de tous les éléments sélectionnés par jQuery, et contrôlez et décochez avec succès les cases à cocher en toutes circonstances. Ainsi, bien que cela puisse sembler être une solution trop lourde, cela améliorera l'expérience utilisateur de votre site et aidera à 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 );

Sinon, 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;
});
288
répondu cwharris 2015-07-31 13:43:36

Vous pouvez le 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 voulez lancer, utilisez celui-ci à la place:

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

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

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

vous pouvez vérifier toutes les cases comme ceci:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
134
répondu Micah 2011-12-29 18:18:24

vous pouvez également étendre le $.fn objet 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 juste 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.

70
répondu livefree75 2010-08-20 18:19:03
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

Le dernier déclenche l'événement click pour la case, les autres pas. Donc si vous avez du code personnalisé dans l'évènement onclick pour la case à cocher que vous voulez lancer, utilisez la dernière.

61
répondu Chris Brandsma 2009-02-03 17:06:43

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 mettre à false:

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

Si vous n'

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

il supprime l'attribut tous ensemble et donc vous ne serez pas en mesure de réinitialiser le formulaire.

BAD DEMO jQuery 1.6 . Je pense que c'est cassé. Pour la 1.6 je suis va faire un nouveau post.

nouvelle démo de travail jquery 1.5.2 works in Chrome.

les deux démos utilisent

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});
58
répondu mcgrailm 2011-12-29 18:21:55

en supposant que la question Est...

Comment puis-je vérifier une case à cocher par valeur?

rappelez-vous que dans une case à cocher typique, toutes les étiquettes d'entrée ont le même nom, ils 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 prolongée avec un sélecteur plus spécifique , en utilisant la ligne suivante de code:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
42
répondu Peter Krauss 2014-06-09 15:07:56

je rate la solution. J'utiliserai toujours:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
42
répondu Overbeeke 2014-12-13 16:43:53

sélectionne les éléments qui ont l'attribut spécifié avec une valeur contenant le substrat "ckbItem":

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

il sélectionnera tous les éléments qui contiennent ckbItem dans son attribut name.

41
répondu Abou-Emish 2018-07-18 13:44:09

pour vérifier une case à cocher en utilisant jQuery 1.6 ou plus:

checkbox.prop('checked', true);

pour décocher, utiliser:

checkbox.prop('checked', false);

voici ce que j'aime utiliser pour basculer une case à cocher en utilisant jQuery:

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

si vous utilisez jQuery 1.5 ou moins:

checkbox.attr('checked', true);

pour décocher, utiliser:

checkbox.attr('checked', false);
37
répondu Ramon de Jesus 2017-05-09 13:23:02

Voici une façon 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>
34
répondu Aeoril 2016-05-10 09:58:32

essayez ceci:

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

$('#checkboxid').get(0).checked = false; //For unchecking
28
répondu prashanth 2013-02-16 10:33:47

voici le code pour vérifié et non vérifié 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 jQuery 1.6 + prop, 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;
    });
});
26
répondu starjahid 2017-04-11 15:55:04

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');
24
répondu Prasanth P 2017-04-11 15:53:21

si vous utilisez PhoneGap faire le développement d'application, et vous avez une valeur sur le bouton que vous voulez montrer instantanément, rappelez-vous de faire cela

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

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

23
répondu Clement Ho 2013-02-16 10:32:37

voici le code et la démo pour vérifier 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;
        }
    }
});
22
répondu tamilmani 2016-02-10 13:18:22

une autre solution possible:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
19
répondu Muhammad Aamir Ali 2014-07-21 09:34:50

si vous utilisez mobile et que vous voulez que l'interface mette à jour et affiche la case à cocher comme non vérifiée, utilisez ce qui suit:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");
17
répondu Matt Peacock 2013-01-11 13:05:35

Être au courant de fuites de mémoire dans Internet Explorer antérieures à la Internet Explorer 9 , comme le jQuery documentation états :

dans Internet Explorer avant la version 9, en utilisant .prop() pour définir un DOM propriété de l'élément à autre chose qu'une simple valeur primitive (nombre, chaîne, OU booléen) peut causer des fuites de mémoire si la propriété est pas supprimées (à l'aide .removeProp ()) avant que L'élément DOM soit retiré d'après le document. Pour définir en toute sécurité des valeurs sur des objets DOM sans mémoire les fuites, utiliser .données.)(

17
répondu naor 2014-11-22 15:33:52

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');
17
répondu logan 2015-04-21 10:29:07

pour vérifier et décocher

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
16
répondu jj2422 2013-12-03 02:18:05
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
15
répondu mahmoh 2013-07-16 02:57:18

c'est probablement la solution la plus courte et la plus facile:

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

ou

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

encore plus court serait:

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

Ici est un jsFiddle .

14
répondu frieder 2014-12-13 16:46:09

comme @livefree75 a dit:

jQuery 1.5.x et inférieur à

vous pouvez également étendre le $.fn objet 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));

alors vous pouvez juste faire:

    $(":checkbox").check();
    $(":checkbox").uncheck();
14
répondu Ardalan Shahgholi 2017-05-21 11:00:42

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

13
répondu Alex W 2013-09-23 01:12:17

quand vous avez coché une case comme;

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

ce n'est peut-être pas assez. Vous devriez également appeler la fonction ci-dessous;

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

surtout si vous retirez l'attribut coché case cochée.

12
répondu Serhat Koroglu 2015-03-05 13:10:51

je ne pouvais pas le faire fonctionner à l'aide de:

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

vrai et faux cochez la case. Ce qui a fonctionné pour moi était:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
11
répondu fredcrs 2014-12-15 18:44:58

Voici la réponse complète en utilisant jQuery

je le teste et il fonctionne 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
    });
10
répondu 2013-02-27 15:49:10

En 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
répondu ijarlax 2014-04-03 21:31:55