utiliser jQuery pour obtenir les valeurs des cases à cocher sélectionnées

Question

utiliser jQuery pour obtenir les valeurs des cases à cocher sélectionnées

Demandé el 2 de Juillet, 2012: Quand la question a-t-elle été
431067 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je veux boucler le groupe de cases à cocher 'locationthemes' et construire une chaîne avec toutes les valeurs sélectionnées. Ainsi, lorsque les cases à cocher 2 et 4 sont sélectionnées, le résultat serait le suivant : "3,8"

<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>

J'ai vérifié ici : http://api.jquery.com/checked-selector/ mais il n'y a pas d'exemple pour sélectionner un groupe de cases à cocher par son nom.

Comment puis-je le faire ?

Demandé el 2 de Juillet, 2012 par Flo

Answer 1

5 Réponses

Answer 2

6voto

ivanhoe Points 643

Une façon un peu plus moderne de le faire :

const selectedValues = $('input[name="locationthemes"]:checked').map( function () { 
        return $(this).val(); 
    })
    .get()
    .join(', ');

Nous trouvons d'abord toutes les cases à cocher sélectionnées avec le nom donné, puis la fonction map() de jQuery parcourt chacune d'entre elles, en appelant la fonction de rappel pour obtenir la valeur, et en renvoyant le résultat sous la forme d'une nouvelle collection jQuery qui contient maintenant les valeurs des cases à cocher. Nous appelons ensuite get() pour obtenir un tableau de valeurs, puis join() pour les concaténer en une seule chaîne, qui est ensuite affectée à la constante selectedValues.

Répondu el 27 de Août, 2020 par ivanhoe (643 Points )

Answer 3

5voto

Tushar Sagar Points 353

You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();

Répondu el 24 de Février, 2014 par Tushar Sagar (353 Points )

Answer 4

5voto

Khurram Shaukat Points 51

var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
     SlectedList.push($(this).val());
});

Répondu el 6 de Mars, 2019 par Khurram Shaukat (51 Points )

Answer 5

2voto

mike Points 21

Donc tout en une seule ligne :

var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");

une remarque sur le sélecteur [id*="checkbox"] il saisira tout élément contenant la chaîne "checkbox". C'est un peu maladroit ici, mais c'est très bien si vous essayez d'extraire les valeurs sélectionnées de quelque chose comme une liste de cases à cocher .NET. Dans ce cas, "checkbox" serait le nom que vous avez donné au contrôle CheckBoxList.

Répondu el 3 de Juillet, 2015 par mike (21 Points )

Answer 6

2voto

vikam tyagi Points 1560

Source - Plus de détails

Obtenir la valeur des cases à cocher sélectionnées en utilisant jQuery

Ensuite, nous écrivons le script de jQuery pour obtenir la valeur de la case à cocher sélectionnée dans un tableau en utilisant jQuery each(). En utilisant cette fonction jQuery, elle exécute une boucle pour obtenir la valeur cochée et la mettre dans un tableau.

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Get Selected Checkboxes Value Using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".btn").click(function() {
                var locationthemes = [];
                $.each($("input[name='locationthemes']:checked"), function() {
                    locationthemes.push($(this).val());
                });
                alert("My location themes colors are: " + locationthemes.join(", "));
            });
        });
    </script>
    </head>
    <body>
        <form method="POST">
        <h3>Select your location themes:</h3>
        <input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
        <label for="checkbox-1">Castle</label>
        <input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
        <label for="checkbox-2">Barn</label>
        <input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
        <label for="checkbox-3">Restaurant</label>
        <input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
        <label for="checkbox-4">Bar</label>
        <br>
        <button type="button" class="btn">Get Values</button>
    </form>
    </body>
    </html>

Répondu el 12 de Août, 2018 par vikam tyagi (1560 Points )

utiliser jQuery pour obtenir les valeurs des cases à cocher sélectionnées

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

utiliser jQuery pour obtenir les valeurs des cases à cocher sélectionnées

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: