Paramétrer & # 8220; vérifié & # 8221; pour une case à cocher avec jQuery?

Question

J'aimerais faire quelque chose comme ceci pour cocher une case à cocher à l'aide de jQuery :

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

ou

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

Une telle chose existe-t-elle?

Answer 1

jQuery 1.6 +

Utilisez la nouvelle méthode .prop () :

$('.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 tests unitaires de jQuery antérieurs à la version 1.6 sont préférables à l’utilisation de

.

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

puisque ce dernier va, si la case a été cochée initialement, changer le comportement d'un appel à .reset () dans tout formulaire le contenant - changement de comportement subtil mais probablement indésirable.

Pour plus de contexte, une discussion incomplète des modifications apportées au traitement de l'attribut / propriété vérifié 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 contre propriétés de la .prop () documentation .

Toute version de jQuery

Si vous travaillez avec un seul élément, vous pouvez toujours modifier le Propriété HTMLInputElement de la propriété .checked :

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

L'avantage d'utiliser les méthodes .prop () et .attr () est qu'elles opéreront sur tous les éléments correspondants.

Answer 2

Utiliser:

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

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

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

Answer 3

C’est la bonne façon de cocher et de décocher les cases à cocher avec jQuery, car il s’agit d’un standard multi-plateformes et autorisera les retraits de formulaire.

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

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

Ce faisant, vous utilisez les normes JavaScript pour cocher et décocher les cases à cocher. Par conséquent, tout navigateur qui implémente correctement l'option "coché". propriété de l’élément de case à cocher exécutera ce code sans faille. Ce devrait être tous les principaux navigateurs, mais je ne parviens pas à tester avant Internet & nbsp; Explorer & nbsp; 9.

Le problème (jQuery 1.6):

Une fois qu'un utilisateur a coché une case à cocher, celle-ci cesse de répondre à la question "cochée". changement d'attribut.

Voici un exemple d'attribut de case à cocher qui échoue après qu'un utilisateur a cliqué sur la case à cocher (cela se produit dans Chrome).

Fiddle

La solution:

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

Violon

Ce plugin modifiera la propriété cochée de tous les éléments sélectionnés par jQuery, et cochera et décochait avec succès dans toutes les circonstances. Ainsi, même si cela peut sembler une solution standard, cela améliorera l'expérience utilisateur de votre site et contribuera à éviter sa frustration.

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

Answer 4

Vous pouvez faire

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

ou

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

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

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

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

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

Vous pouvez cocher toutes les cases comme ceci:

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

Answer 5

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

Vous pouvez également leur attribuer des noms uniques tels que mycheck () et myuncheck () si vous utilisez une autre bibliothèque utilisant ces noms.

Answer 6

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

Le dernier déclenchera l'événement click 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 voulez activer, utilisez le dernier.

Answer 7

Pour cocher une case à cocher, 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 vous le faites

  $('.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 message à ce sujet.

NOUVELLE DÉMO DE TRAVAIL jQuery 1.5.2 fonctionne sous Chrome.

Les deux démos utilisent

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

Answer 8

Ceci sélectionne les éléments ayant 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 contenant ckbItem dans son attribut name.

Answer 9

En supposant que la question soit ...

Comment puis-je cocher 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 valeur : il n'y a pas d'identifiant pour chaque entrée de l'ensemble. .

La réponse de Xian peut être complétée par un sélecteur plus spécifique , en utilisant la ligne de code suivante:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

Answer 10

Je manque la solution. Je vais toujours utiliser:

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

Answer 11

Pour cocher une case à l'aide de jQuery 1.6 ou d'une 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 activer une case à cocher à l'aide de jQuery:

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

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

checkbox.attr('checked', true);

Pour décocher, utilisez:

checkbox.attr('checked', false);

Answer 12

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>

Answer 13

Essayez ceci:

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

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

Answer 14

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 méthode plus récente de 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;
    });
});

Answer 15

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

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

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

Answer 16

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 , rappelez-vous de le faire

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

J'ai constaté que, sans la durée, l'interface ne sera pas mise à jour, peu importe ce que vous ferez.

Answer 17

Voici le code et la démonstration 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;
        }
    }
});

Answer 18

Une autre solution possible:

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

Answer 19

Si vous utilisez mobile et que vous souhaitez que l'interface soit mise à jour et que la case à cocher soit désélectionnée, utilisez les éléments suivants:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

Answer 20

Tenez compte des fuites de mémoire dans Internet Explorer avant Internet & nbsp; Explorer & nbsp; 9 , comme les états de la documentation jQuery :

  

Dans Internet Explorer avant la version 9, utilisation de .prop () pour définir un DOM   propriété d'élément à autre chose qu'une simple valeur primitive   (nombre, chaîne ou booléen) peut provoquer des fuites de mémoire si la propriété est   non supprimé (à 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 mémoire   fuites, utilisez .data ().

Answer 21

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

Pour vérifier,

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

Answer 22

Pour cocher et décocher

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

Answer 23

Comme @ livefree75 a déclaré:

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

Answer 24

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

Answer 25

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

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

ou

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

Même plus court serait:

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

Voici un jsFiddle également.

Answer 26

Le code JavaScript simple est très simple et nécessite 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

Answer 27

Je ne pouvais pas le faire fonctionner avec:

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

true et false cocheraient la case. Ce qui a fonctionné pour moi a été:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

Answer 28

Lorsque vous avez coché une case à cocher telle que;

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

cela pourrait ne pas suffire. Vous devriez également appeler la fonction ci-dessous;

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

Surtout lorsque vous avez supprimé l'attribut de case à cocher cochée.

Answer 29

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

Answer 30

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