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

240

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

Tout 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?

jquery html checkbox

— Lanqy
source

vouliez-vous tout ou un à la fois?

— TStamper

Comment «cocher» la case avec une valeur / étiquette donnée? dire "one_name2"?

— Amitd

5

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

— Mark Schultheiss

merci qui a bien fonctionné .. même pour le type de radio. 1 vote :)

— Amitd

320

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

Mettre à jour

Un certain nombre de mois plus tard, une autre question a été posée sur la façon de continuer à fonctionner si l'ID change. Eh bien, la solution se résume à 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 changements.

— cgp
source

2

Ah ha! Excellent. Vous avez pris en compte les deux scénarios probables. Bon travail monsieur. ;)

— KyleFarris

Comment «cocher» la case avec une valeur / étiquette donnée? dire "one_name2"?

— Amitd

6

J'aime utiliser map pour des trucs comme celui-ci: $ (': vérifié', '#c_b'). Map (function (i, cb) {return cb.value}) .get (). En outre, ce n'est qu'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 ($ (': vérifié', '#c_b'). map (function (i, cb) {return cb.value}) .get ())); $ ('# c_b input: first'). triggerHandler (' Cliquez sur'); });

— Brandon

utiliser à la $(document).on("click", "#c_b input", updateTextArea);place pour contourner les problèmes ajax'y.

— Goldentoa11

1

Je ne sais pas si c'est juste dans IE (11), mais ne devrait-il pas l'être $('#c_b:checked')(accent sur l'espacement)?

— AceMark

124

Vous pouvez également renvoyer 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'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>

— Mohamed ElSheikh
source

Je suis juste tombé sur cela en cherchant un moyen d'obtenir toutes les valeurs des cases à cocher d'un nom donné et cela fonctionne pour moi avec deux petits problèmes. 1) chaque fois que je coche une case autre que la première, elle fait basculer la coche dans la première. 2) Lorsque j'essaie de définir cela sur un tableau afin de pouvoir accéder aux informations plus tard, il se bloque.

— Révérend Bubbles

3

C'est honnêtement la meilleure réponse. Très simple. J'aurais supprimé la "fonction" et "l'alerte" car cela déroute certaines personnes, mais le code est simple, bien fait.

— tmarois

showSelectedValues fonctionne également pour décoder les groupes de boutons radio qui portent le même nom

— Matthew Lock

65

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 HTML avant. Quoi qu'il en soit, oui, je pensais que vous vouliez mettre la valeur dans une zone de texte lorsqu'elle est cliquée. Si vous voulez que les valeurs des cases à cocher soient mises dans la zone de texte (peut-être avec une belle séparation par des virgules) au 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. ;)

— KyleFarris
source

50

Cela fonctionne parfaitement pour moi:

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

Merci Mohamed ElSheikh

— Nic
source

1

cool man ... c'est le seul qui a fonctionné pour ma boucle ajax;) merci

— Sagive SEO

7

peut également $ ('input [nom = sélection]: vérifié'). map (function () {return this.value;}). toArray ()

— ygaradon

8

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

— Harpreet Bhatia
source

6

Ce qui suit peut être utile car 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 que les cases à cocher renvoyaient leurs valeurs indépendamment de l'état vérifié. 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 vérifié.

— Andy
source

ça marche vraiment bien, merci beaucoup ... Je viens de changer le "return jQuery (this) .val ();" pour "retourner vrai;" car c'est une case à cocher dans mon cas j'ai juste besoin de savoir si elle est cochée ou pas .. merci!

— TCB13

5

Voici une alternative au cas où vous auriez besoin d'enregistrer la valeur dans une variable:

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

(map () renvoie un tableau, que je trouve plus pratique que le texte dans textarea).

— pgcd
source

3

   $(document).ready(function() {
        $(':checkbox').click(function(){
           var cObj = $(this);
           var cVal = cObj.val();
           var tObj = $('#t');
           var tVal = tObj.val();
           if( cObj.attr("checked")) {
              tVal = tVal + "," + cVal; 
              $('#t').attr("value", tVal);
           } else {
              //TODO remove unchecked value.
           }
        });
    });

1

Vous l'avez trop compliqué. En outre, vous ne définissez généralement pas la valeur d'une zone de texte avec le paramètre value - la valeur d'une zone de texte est son innerHTML. Et si vous deviez définir la valeur d'un élément, il est généralement préférable d'utiliser la méthode 'val ()' à des fins d'abstraction du navigateur.

— KyleFarris

3

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

— satoru
source

2

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

— mkoryak
source

1

Plusieurs cases à cocher peuvent être cochées à la fois.

— KyleFarris

2

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

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

Cela obtiendra la valeur de la première case 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 placer les cases à cocher dans un formulaire.

— Pim Jager
source

2

C'est faux, isrenvoie une valeur booléenne, une valeur booléenne n'a pas de valméthode.

— undefined

2

Une manière beaucoup plus facile et abrégée que j'utilise pour accomplir la même chose, en utilisant la réponse d'un autre post, est comme ceci:

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

À l'origine, les villes sont extraites d'une base de données MySQL et bouclées en PHP en boucle:

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, j'obtiens toutes les valeurs city_id et je les soumets à la base de données en utilisant $ .get (...)

Cela m'a rendu la vie si facile puisque maintenant le code est entièrement dynamique. Afin d'ajouter plus de villes, tout ce que je dois faire est d'ajouter plus de villes dans ma base de données, et pas de soucis sur PHP ou jQuery.

— zeeshan
source

0

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

— sam
source

0

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

— sonida
source

0

Si vous souhaitez insérer immédiatement la valeur d'une case à cocher lors de la vérification, cela devrait fonctionner pour vous:

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

— duckyflip
source

Ne tient pas compte des valeurs multiples et des cases à cocher décochées

— Rob