web-dev-qa-db-fra.com

Paramètre "coché" pour une case à cocher avec jQuery?

J'aimerais faire quelque chose comme ceci pour cocher une checkbox en utilisant jQuery :

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

ou 

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

Est-ce qu'une telle chose existe?

javascriptjquerycheckboxselectedchecked
3783
tpower

jQuery 1.6+

Utilisez la nouvelle méthode .prop() :

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

jQuery 1.5.x et ci-dessous

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 et qu'il est préférable d'utiliser

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

puisque ce dernier modifiera le comportement d'un appel à .reset() sur tout formulaire qui le contient, si la case a été cochée initialement - 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 version de la version 1.6 et les Attributes vs. Section Propriétés de la documentation .prop() .

Toute version de jQuery

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

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

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

5626
Xian

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

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 autorisera les retraits de 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. Ceci devrait être l’ensemble des navigateurs principaux, mais je ne parviens pas à effectuer de test antérieur à 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 coché 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 pouvons résoudre le problème directement, au lieu d'essayer de manipuler le DOM pour faire ce que nous voulons le faire.

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

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

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 donner des noms uniques, tels que mycheck () et myuncheck (), au cas où vous utiliseriez une autre bibliothèque utilisant ces noms.

75
livefree75
$("#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 .. .. Si vous avez un code personnalisé dans l'événement onclick pour la case à cocher que vous souhaitez activer, utilisez le dernier.

64
Chris Brandsma

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

En supposant que la question est ...

Comment puis-je vérifier un checkbox-set 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 l'attribut value: 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);
44
Peter Krauss

Je manque la solution. Je vais toujours utiliser:

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

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.

44
Abou-Emish

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 activer 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);
40
Ramon de Jesus

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>

35
Aeoril

Essaye ça:

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

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

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

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');
26
Prasanth P

Si vous utilisez PhoneGap effectuez le développement d’application 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, peu importe ce que vous ferez.

25
Clement Ho

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

Une autre solution possible:

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

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

Dans Internet Explorer avant la version 9, utilisez .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 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 ().

18
naor

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

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

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

Pour cocher et décocher

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
17
jj2422
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
16
mahmoh

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();
16
Ardalan Shahgholi

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 a jsFiddle aussi.

15
frieder

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

14
Alex W

Lorsque vous avez coché une case comme

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

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

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

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

13
Serhat Koroglu

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
13
fredcrs

Voici la réponse complète Using 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
    });
11
user1477929

Si vous utilisez ASP.NET MVC , générez de nombreuses cases à cocher et que plus tard, pour tout sélectionner/désélectionner à l'aide de JavaScript, vous pouvez procéder comme suit.

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);
        });
    }
10
Academy of Programmer

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

Cela peut aider quelqu'un.

HTML5

 <input id="check_box" type="checkbox" onclick="handleOnClick()">

JavaScript.

  function handleOnClick(){

      if($("#check_box").prop('checked'))
      {        
          console.log("current state: checked");
      }
      else
      {         
          console.log("current state: unchecked");
      }    
 }
7
Sedrick

Vous pouvez essayer ceci:

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
5
anusha
$(".myCheckBox").prop("checked","checked");
4
mathew

if($('jquery_selector').is(":checked")){
  //somecode
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

4
David Arul

_ {Si vous utilisez Bootstrap (peut-être de façon inattendue) ...

$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')

http://www.bootstraptoggle.com/

3
Kenmeister

Si vous utilisez .prop('checked', true|false) et que vous n'avez pas changé case à cocher , vous devez ajouter trigger('click') comme ceci.

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


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

Vous pouvez cocher la case cochée en utilisant 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 la condition de vérification si la case à cocher est cochée ou non) - $('.myCheckbox').is(':checked')

1
Gaurang Sondagar

Edité en 2019 janvier

Vous pouvez utiliser: .prop (propertyName) - version ajoutée: 1.6

p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    "The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    "The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    "The .is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>

Sur cadre angulaire

Exemple 1

Dans votre fichier .html

<input type="checkbox" (change)="toggleEditable($event)">

Dans votre fichier .ts

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

Exemple 2

Dans votre fichier .html

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />
0
Lyes CHIOUKH