Paramètre “checked” pour une case à cocher avec jQuery?

jQuery 1.6+

Utiliser le nouveau .prop() méthode:

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

jQuery 1.5.x et au-dessous de

La .prop() méthode n'est pas disponible, vous devrez utiliser .attr().

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

Noter que c'est l'approche utilisée par jQuery tests unitaires avant la version 1.6 et est préférable à l'utilisation

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

depuis ce dernier, si la zone a d'abord été vérifié, changer le comportement d'un appel à .reset() d'un formulaire qui contient un subtil mais sans doute malvenu de changement de comportement.

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 la la version 1.6 notes de version et la Attributs vs Propriétés section de la .prop() de la documentation.

N'importe quelle 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 à l'utilisation de la .prop() et .attr() méthodes au lieu de cela, c'est qu'ils fonctionnent sur tous les éléments qui correspondent.

C'est la bonne façon de vérifier et en décochant les cases à cocher avec jQuery, comme il est multi-plateforme standard, et sera permettre à la forme reposte.

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

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

En faisant cela, vous êtes à l'aide de JavaScript normes de vérification et de décocher les cases à cocher, donc n'importe quel navigateur qui met en place la "vérifié" propriété de la case à cocher élément d'exécuter ce code à la perfection. Cette devrait être tous les principaux navigateurs, mais je suis incapable de test précédent sur Internet Explorer 9.

Le Problème (jQuery 1.6):

Une fois qu'un utilisateur clique sur une case, cette case à cocher cesse de répondre à la "vérifié" les changements d'attribut.

Voici un exemple de la case de l'attribut à défaut de faire le travail, après que quelqu'un a cliqué la case (ce qui se passe dans Chrome).

Violon

La Solution:

En utilisant du JavaScript "vérifié" bien sur la DOM éléments, nous sommes en mesure de résoudre le problème directement, au lieu d'essayer de manipuler le DOM en faisons ce que nous voulez à faire.

Violon

Ce plugin modifie la propriété checked de tous les éléments sélectionnés par jQuery, et avec succès cocher et décocher les cases dans toutes les circonstances. Donc, même si cela peut sembler comme une sur-solution de roulement, il fera de votre site de l'expérience utilisateur de mieux, et aider à prévenir la frustration de l'utilisateur.

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

Vous pouvez également étendre l' $.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 simplement faire:

$(":checkbox").check();
$(":checkbox").uncheck();

Ou vous pouvez leur donner plus de noms uniques comme mycheck() et myuncheck() dans le cas où vous utilisez une autre bibliothèque qui utilise ces noms.

De cocher une case à cocher, vous devez utiliser

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

ou

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

et de décocher une case à cocher, vous devez toujours mettre à false:

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

Si vous ne

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

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

MAUVAISE DÉMO jQuery 1.6. Je pense que c'est cassé. Pour la 1.6 je vais faire un nouveau post sur ce.

NOUVEAU DEMO jQuery 1.5.2 fonctionne dans Chrome.

Deux démos utilisation

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

En supposant que la question est...

Comment puis-je vérifier un case-set EN VALEUR?

Rappelez-vous que, dans un typique jeu de cases à cocher, toutes les balises input 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.

Xian, la réponse peut être étendue avec une plus spécifiques sélecteur de, à l'aide de la ligne de code suivante:

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

De cocher une case à l'aide de jQuery 1.6 ou plus simplement faire ceci:

checkbox.prop('checked', true);

De décocher, utilisation:

checkbox.prop('checked', false);

Ici' s ce que j'aime à utiliser pour basculer d'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);

De décocher, utilisation:

checkbox.attr('checked', false);

Essayez ceci:

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

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

Nous pouvons utiliser elementObject avec jQuery pour obtenir l'attribut checked:

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

Nous pouvons l'utiliser pour toutes les versions de jQuery sans aucune erreur.

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

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

Voici le code et de démonstration pour savoir comment 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;
        }
    }
});

Si l'utilisation du mobile et que vous souhaitez que l'interface de mise à jour et de montrer la case, la case est décochée, utilisez la commande suivante:

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

Pour jQuery 1.6+

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

Pour jQuery 1.5.x et au-dessous de

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

Pour vérifier,

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

Comme @livefree75 dit:

jQuery 1.5.x et au-dessous de

Vous pouvez également étendre l' $.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 avons 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 simplement faire:

    $(":checkbox").check();
    $(":checkbox").uncheck();

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

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

ou

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

Encore plus courte serait:

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

Ici est un jsFiddle ainsi.

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

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

À la fois vrai et faux aurait cochez la case correspondante. Ce qui a fonctionné pour moi a été:

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

Voici la réponse complète
à l'aide de jQuery

Je l'ai tester et il fonctionne à 100% 😀

    //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 le cas où vous utilisez ASP.NET MVC, de générer de nombreuses cases à cocher et d'avoir plus tard pour sélectionner/désélectionner toutes les à l'aide de JavaScript, vous pouvez effectuer les opérations suivantes.

HTML

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

JavaScript

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }

Vous pouvez essayer ceci:

$('input[name="activity[task_state]"]').val("specify the value you want to check ")

$(".myCheckBox").prop("checked","checked");

Si vous utilisez .prop('checked', true|false) et n'ont pas changé case, vous avez besoin d'ajouter trigger('click') comme ce

//check
$('#checkboxF1').prop( "checked", true).trigger('click');


//un-Check
$('#checkboxF1').prop( "checked", true).trigger('click');

Vous pouvez cocher la case cochée condition à l'aide de JS de différentes manières. vous pouvez voir ci-dessous.

1. Première Méthode -
   $('.myCheckbox').prop('checked', true);

2. Deuxième Méthode -
   $('.myCheckbox').attr('checked', true);

3. Troisième Méthode (pour vérifier la condition si la case est cochée ou non) - $('.myCheckbox').is(':checked')