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

comment utiliser jQuery pour obtenir les valeurs des cases à cocher vérifiées, et de le mettre dans une textarea immédiatement?

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 ci-dessous du code d'altCognito ne fonctionne pas. Est-il une bonne solution?

230
demandé sur user86745458 2009-04-24 18:45:48
la source

16 ответов

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 concernant la façon de garder le travail ci-dessus si L'ID change. Eh bien, la solution se résume à mapper la fonction updateTextArea en quelque chose de générique qui utilise les classes CSS, et d'utiliser la fonction live pour surveiller le DOM pour ces changements.

306
répondu cgp 2017-11-14 18:44:27
la source

vous pouvez également retourner toutes les valeurs des cases à cocher sélectionnées dans la chaîne de caractères séparée par des virgules. Cela vous facilitera également la tâche lorsque vous l'envoyez en paramètre à SQL

voici un exemple qui renvoie toutes les valeurs de cases à cocher sélectionnées qui ont le nom "chkboxName" dans la chaîne de caractères séparée

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>
115
répondu Mohamed ElSheikh 2011-05-25 00:42:42
la source

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, okay.. là vous allez... Vous n'aviez pas le HTML avant. Bref, Ouais, je pensais que tu voulais mettre la valeur dans un textarea quand il est cliqué. Si vous voulez que les valeurs des cases à cocher vérifiées soient insérées dans la textarea (peut-être avec une belle virgule) sur la page de chargement, 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 aussi faire ceci pour raccourcir le long sélecteur que j'ai écrit:

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

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

62
répondu KyleFarris 2009-04-24 19:12:12
la source

cela fonctionne parfaitement pour moi:

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

Merci Mohamed ElSheikh

43
répondu Nic 2014-11-12 18:04:20
la source

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
répondu Harpreet Bhatia 2017-11-14 20:52:04
la source

ce qui suit peut être utile puisque je suis arrivé ici à la recherche d'une solution légèrement différente. Mon script avait besoin de passer automatiquement en boucle par les éléments d'entrée et devait retourner leurs valeurs (pour jQuery.post () function), le problème était que les cases à cocher retournaient 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();
    }
};

Utilisation:

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

si le champ d'entrée donné est une case à cocher, la fonction input_val retourne seulement une valeur si ses vérifié. Pour tous les autres éléments, la valeur est retournée indépendamment de l'état vérifié.

6
répondu Andy 2010-12-28 08:00:41
la source

Voici une alternative dans le cas où vous avez besoin de sauver la valeur à 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 dans textarea).

5
répondu pgcd 2014-11-12 18:03:05
la source
   $(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.
           }
        });
    });
3
répondu 2009-04-24 19:10:50
la source
 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });
3
répondu satoru 2011-03-04 10:03:25
la source
$("#t").text($("#cb").find(":checked").val())
2
répondu mkoryak 2009-04-24 18:51:13
la source

de toute façon, vous avez probablement besoin de quelque chose comme ceci:

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

la valeur de la première case à cocher cochée sur la page sera inscrite dans le texte avec id='textarea' .

notez que dans votre exemple de code vous devez mettre les cases à cocher dans une forme.

2
répondu Pim Jager 2010-02-04 22:16:38
la source

une façon beaucoup plus facile et court-circuité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();

a l'Origine, les villes sont récupérées à partir d'une base de données MySQL, et boucle en 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, j'obtiens toutes les valeurs city_id, et je renvoie à la base de données en utilisant $.obtenir.(..)

cela a rendu ma vie si facile depuis 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 end.

2
répondu zeeshan 2014-11-12 18:03:42
la source
<html>
<head>
<title>jQuery check / uncheck a check box example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery check / uncheck a check box example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#isCheck").click(function () {

    alert($('input:checkbox[name=checkme]').is(':checked'));

    });

    $("#checkIt").click(function () {

    $('input:checkbox[name=checkme]').attr('checked',true);

    });

    $("#UnCheckIt").click(function () {

    $('input:checkbox[name=checkme]').attr('checked',false);

    }); 

  });
</script>
</head><body>

<input type="checkbox" name="checkme">Check Me</input>

<br/>
<br/>
<br/>

<input type='button' value='Is Check' id='isCheck'>
<input type='button' value='Check It' id='checkIt'>
<input type='button' value='UnCheck It' id='UnCheckIt'>

</body>
</html>
1
répondu sarath 2014-07-03 15:14:32
la source

j'ai eu un problème similaire et c'est 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
répondu sam 2013-11-06 00:00:44
la source

essayez celui-ci..

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
répondu sonida 2014-11-17 22:13:27
la source

Si vous voulez insérer la valeur de la case immédiatement, car elle est cochée, cela devrait fonctionner pour vous:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})
0
répondu duckyflip 2018-04-19 04:21:52
la source

Autres questions sur jquery html checkbox