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
la source

30 ответов

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 20:27:36
la source

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 21:34:03
la source

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 16:43:36
la source

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 22:18:24
la source

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 22:19:03
la source
$("#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 20:06:43
la source

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 22:21:55
la source

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 19:07:56
la source

je rate la solution. J'utiliserai toujours:

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

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 16:44:09
la source

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 16:23:02
la source

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 12:58:32
la source

essayez ceci:

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

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

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 18:55:04
la source

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 18:53:21
la source

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 14:32:37
la source

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 16:18:22
la source

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 13:34:50
la source

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 17:05:35
la source

Ê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 18:33:52
la source

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 13:29:07
la source

pour vérifier et décocher

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

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 19:46:09
la source

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 14:00:42
la source

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 05:12:17
la source

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 16:10:51
la source

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 21:44:58
la source

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 19:49:10
la source

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-04 01:31:55
la source

Autres questions sur javascript jquery checkbox selected checked