web-dev-qa-db-fra.com

Comment récupérer des valeurs de cases à cocher dans jQuery

Comment utiliser jQuery pour obtenir les valeurs des cases à cocher, et le mettre immédiatement dans une zone de texte?

Juste 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 du code altCognito ne fonctionne pas. Y a-t-il une bonne solution?

jqueryhtmlcheckbox
236
lanqy

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

Un certain nombre de mois plus tard, une autre question a été posée sur la manière de continuer à utiliser ce qui précède si l’ID change. Eh bien, la solution consiste à mapper la fonction updateTextArea en quelque chose de générique qui utilise des classes CSS et à utiliser la fonction live pour surveiller le DOM pour ces modifications.

314
cgp

Vous pouvez également renvoyer toutes les valeurs des 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 de cases à cocher sélectionnées portant 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'exemple 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>
119
Mohamed ElSheikh

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

Edit: Oh, d'accord .. voilà ... Vous n'aviez pas le code HTML en place avant. Quoi qu'il en soit, oui, je pensais que vous vouliez mettre la valeur dans une zone de texte lorsque vous cliquez dessus. Si vous voulez que les valeurs des cases à cocher soient placées dans la zone de texte (peut-être avec une séparation par virgule de Nice) lors du chargement de la page, ce serait aussi simple que:

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

Edit 2 Comme les gens l'ont fait, vous pouvez également le faire pour raccourcir le long sélecteur que j'ai écrit:

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

... J'ai totalement oublié ce raccourci. ;)

63
KyleFarris

Cela fonctionne parfaitement pour moi:

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

Merci Mohamed El Cheikh

48
Nic

Merci altCognito, votre solution 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();
});
8
Harpreet Bhatia

Ce qui suit peut être utile puisque je suis arrivé ici à la recherche d’une solution légèrement différente. Mon script devait parcourir automatiquement les éléments d'entrée et devait renvoyer leurs valeurs (pour la fonction jQuery.post ()). Le problème était lié aux cases à cocher renvoyant leurs valeurs, quel que soit l'état coché. C'était ma solution:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

Usage:

jQuery(".element").input_val();

Si le champ de saisie donné est une case à cocher, la fonction input_val ne renvoie une valeur que si elle est cochée. Pour tous les autres éléments, la valeur est renvoyée quel que soit l'état coché.

6
Andy

Voici une alternative au cas où vous auriez besoin de sauvegarder la valeur dans une variable:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map () retourne un tableau, que je trouve plus pratique que le texte de textarea).

5
pgcd
 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });
3
satoru

Quoi qu'il en soit, vous avez probablement besoin de quelque chose comme ça:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

Cela aura la valeur de la première case à cocher cochée sur la page et l'insérera dans la zone de texte avec id='textarea'.

Notez que dans votre exemple de code, vous devez mettre les cases à cocher dans un formulaire.

2
Pim Jager

Voici un moyen beaucoup plus simple et rapide que j'utilise pour accomplir la même chose, en utilisant la réponse d'un autre message:

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

A l'origine, les villes étaient extraites d'une base de données MySQL et bouclées dans PHP boucle while:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

Maintenant, en utilisant le code jQuery ci-dessus, je récupère toutes les valeurs de city_id et le renvoie à la base de données à l'aide de $ .get (...)

Cela a rendu ma vie si facile depuis que le code est entièrement dynamique. Afin d'ajouter plus de villes, tout ce que j'ai à faire, c'est d'ajouter plus de villes dans ma base de données, et aucun souci sur PHP ni sur la fin de jQuery.

2
zeeshan
$("#t").text($("#cb").find(":checked").val())
2
mkoryak

Si vous voulez insérer immédiatement la valeur d'une case à cocher pendant qu'elle est cochée, cela devrait fonctionner pour vous:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})
0
duckyflip

Essaye celui-là..

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .Push($(this).val());
});
console.log(listCheck);
0
sonida

J'ai eu un problème similaire et voici comment je l'ai résolu en utilisant les exemples ci-dessus:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });
0
sam