246 votes

lanqy avatar

Comment récupérer les valeurs des cases à cocher en jQuery ?

Demandé el 24 de Avril, 2009
Quand la question a-t-elle été
325285 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Mode d'emploi jQuery pour récupérer les valeurs des cases à cocher cochées, et les mettre immédiatement dans un textarea ?

Comme ce code :

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

Si le id="c_d" est mis à jour par Ajax le code ci-dessous d'altCognito ne fonctionne pas. Y a-t-il une bonne solution ?

Demandé el 24 de Avril, 2009 par lanqy

0 votes

Avatar de TStamper

Vous les voulez tous ou un seul à la fois ?

Commenté el 24 de Avril, 2009 par TStamper

0 votes

Avatar de Amitd

Comment pouvons-nous "cocher" la case avec une valeur/label donnée ? disons "one_name2" ?

Commenté el 26 de Mars, 2010 par Amitd

5 votes

Avatar de Mark Schultheiss

@Amitd utilise $("input[name=one_name2]").attr('checked', true) ;

Commenté el 26 de Mars, 2010 par Mark Schultheiss
Afficher 1 autres commentaires

Réponses

Trop de publicités?

325voto

altCognito avatar
altCognito Points 23944

En voici un qui fonctionne ( voir l'exemple ):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

Mise à jour

Quelques mois plus tard, une autre question a été posée concernant la manière de maintenir le fonctionnement de ce qui précède en cas de changement d'identité. Eh bien, la solution se résume à mapper la fonction updateTextArea en quelque chose de générique qui utilise les classes CSS, et à utiliser la fonction live pour surveiller le DOM pour ces changements.

Répondu el 24 de Avril, 2009 par altCognito (23944 Points )

0 votes

Avatar de Amitd

Comment pouvons-nous "cocher" la case avec une valeur/label donnée ? disons "one_name2" ?

Commenté el 26 de Mars, 2010 par Amitd

6 votes

Avatar de Brandon

J'aime utiliser map pour des choses comme ceci : $(':checked', '#c_b').map(function (i,cb) { return cb.value} ).get(). De plus, c'est juste une préférence personnelle, mais je séparerais l'obtention des valeurs de la modification des zones de texte, quelque chose comme : $(function() { $('#c_b input').click($('#t').val($(':checked', '#c_b').map(function (i,cb) { return cb.value} ).get())) ; $('#c_b input:first').triggerHandler('click') ; }) ;

Commenté el 5 de Novembre, 2011 par Brandon

0 votes

Avatar de Goldentoa11

Utiliser $(document).on("click", "#c_b input", updateTextArea); pour contourner les problèmes d'ajax.

Commenté el 14 de Octobre, 2014 par Goldentoa11
Afficher 2 autres commentaires

130voto

Mohamed ElSheikh avatar
Mohamed ElSheikh Points 579

Vous pouvez également renvoyer la valeur de toutes les cases à cocher sélectionnées dans une chaîne séparée par des virgules. Cela vous facilitera également la tâche lorsque vous l'enverrez en tant que paramètre à SQL.

Voici un exemple qui renvoie toutes les valeurs des cases à cocher sélectionnées qui ont le nom "chkboxName" dans une chaîne séparée par des virgules.

Et voici le javascript

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(function () {
    return this.value;
  }).get().join(","));
}

Voici l'échantillon HTML

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>
Répondu el 24 de Mai, 2011 par Mohamed ElSheikh (579 Points )

0 votes

Avatar de Reverend Bubbles

Je suis tombé sur cette méthode en cherchant un moyen d'obtenir toutes les valeurs des cases à cocher cochées d'un nom donné et elle fonctionne pour moi avec deux petits problèmes. 1) chaque fois que je coche une case autre que la première, la coche de la première est basculée. 2) Lorsque j'essaie de définir cette fonction dans un tableau afin de pouvoir accéder aux informations ultérieurement, le programme se plante.

Commenté el 12 de Décembre, 2014 par Reverend Bubbles

3 votes

Avatar de Idealcastle

C'est honnêtement la meilleure réponse. Très simple. J'aurais enlevé les mots "function" et "alert" car cela peut prêter à confusion pour certaines personnes, mais le code est simple et bien fait.

Commenté el 14 de Août, 2016 par Idealcastle

0 votes

Avatar de Matthew Lock

ShowSelectedValues fonctionne également pour décoder les groupes de boutons radio qui ont le même nom.

Commenté el 24 de Août, 2016 par Matthew Lock

66voto

KyleFarris avatar
KyleFarris Points 7727

Votre question est assez vague mais je pense que c'est ce dont vous avez besoin :

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

Editar: Oh, ok... voilà... Tu n'avais pas mis le HTML avant. Bref, je pensais que tu voulais mettre la valeur dans une zone de texte quand on clique dessus. Si tu veux que les valeurs des checkboxes cochées soient placées dans le textarea (peut-être avec une belle séparation par des virgules) au chargement de la page, ce serait aussi simple que ça :

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

Edición 2 Comme d'autres l'ont fait, vous pouvez aussi faire cela pour raccourcir le long sélecteur que j'ai écrit :

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... J'avais complètement oublié ce raccourci. ;)

Répondu el 24 de Avril, 2009 par KyleFarris (7727 Points )

49voto

Nic avatar
Nic Points 310

Cela fonctionne parfaitement pour moi :

alert($("input[name=chkboxName]:checked").map(function () {return this.value;}).get().join(","));

Merci Mohamed ElSheikh

Répondu el 16 de Mai, 2012 par Nic (310 Points )

8voto

Harpreet Bhatia avatar
Harpreet Bhatia Points 110

Merci altCognito, votre solution m'a aidé. Nous pouvons également le faire en utilisant le nom des cases à cocher :

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});
Répondu el 11 de Juin, 2010 par Harpreet Bhatia (110 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X