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

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

ou

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

Une telle chose existe-t-elle?

JQuery moderne

Utilisation .prop():

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

API DOM

Si vous travaillez avec un seul élément, vous pouvez toujours simplement accéder au sous-jacent HTMLInputElementet modifier sa .checkedpropriété:

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

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

jQuery 1.5.x et inférieur

La .prop()méthode n'est pas disponible, vous devez donc l'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 qu'il est préférable d'utiliser $('.myCheckbox').removeAttr('checked');car cette dernière va, si la case a été initialement cochée, changer le comportement d'un appel à .reset()sur n'importe quel formulaire qui la contient - un subtil mais probablement changement de comportement indésirable.

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

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

C'est la bonne façon de cocher et de décocher les cases à cocher avec jQuery, car c'est une norme multiplateforme, et cela permettra des 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. Cela 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 pour qu'il fasse 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;
});

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

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 voudrez peut-être leur donner des noms plus uniques comme mycheck () et myuncheck () dans le cas où vous utilisez une autre bibliothèque qui utilise ces noms.

$("#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.

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 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.

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

Cela 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.

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'attributvalue : 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);

Je manque la solution. J'utiliserai toujours:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

Pour cocher une case à l'aide de jQuery 1.6 ou supérieur, 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 inférieur:

checkbox.attr('checked', true);

Pour décocher, utilisez:

checkbox.attr('checked', false);

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>

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

Essaye ça:

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

$('#checkboxid').get(0).checked = false; //For unchecking

Nous pouvons utiliser elementObjectavec jQuery pour obtenir l'attribut vérifié:

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

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 le faire

$('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.

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

Une autre solution possible:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

Comme l'a dit @ livefree75:

jQuery 1.5.x et inférieur

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

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

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

Dans Internet Explorer antérieur à 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 ().

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

Pour cocher et décocher

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

$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

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 .

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

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

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.

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

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