javascript - verifier - Paramétrer «coché» pour une case à cocher avec jQuery?




verifier si un checkbox est coché jquery (20)

J'aimerais faire quelque chose comme ceci pour cocher une checkbox aide de jQuery :

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

ou

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

Est-ce qu'une telle chose existe?


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 que c’est l’approche utilisée par les tests unitaires de jQuery avant la version 1.6 et elle est préférable à l’utilisation de

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

puisque ce dernier modifiera, si la case a été cochée initialement, le comportement d'un appel à .reset() sur 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é checked lors de la transition de 1.5.x à 1.6 est disponible dans les notes de publication de la version 1.6 et la section Attributs contre propriétés du .prop() documentation .

Toute version de jQuery

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

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

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


C’est le bon moyen de cocher et de décocher les cases à cocher avec jQuery, car il s’agit d’un standard multi-plateformes et permet le repostage des formulaires.

$('.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. Ainsi, tout navigateur qui implémente correctement la propriété "vérifié" 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 Explorer 9.

Le problème (jQuery 1.6):

Lorsqu'un utilisateur clique sur une case à cocher, cette case à cocher cesse de répondre aux modifications d'attributs "cochées".

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

Fiddle

La solution:

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

Fiddle

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

Si vous ne souhaitez pas utiliser de plug-in, vous pouvez également 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;
});

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 contenant ckbItem dans son attribut name.


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

En supposant que la question est ...

Comment vérifier un ensemble de cases à cocher BY VALUE?

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 la value de l'attribut : il n'y a pas d'identifiant 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);

Essaye ça:

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

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

Je manque la solution. Je vais toujours utiliser:

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

Je ne pouvais pas 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 a été:

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

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+ a la nouvelle méthode prop qui remplace attr, par exemple:

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

Pour cocher et décocher

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

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

Les deux démos utilisent

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

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

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

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

Tenez compte des fuites de mémoire dans Internet Explorer antérieures à Internet Explorer 9 , car la api.jquery.com/prop :

Dans Internet Explorer avant la version 9, l'utilisation de .prop () pour définir une propriété d'élément DOM sur une valeur autre 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 ().


Une autre solution possible:

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

Utilisation:

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

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

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

$("#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. Par conséquent, si vous avez du code personnalisé dans l'événement onclick pour la case à cocher que vous souhaitez activer, utilisez la dernière.





checked