web-dev-qa-db-fra.com

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

Je souhaite parcourir 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 cochées, le résultat serait: "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 faire ceci?

javascriptjquery
66
Flo

Dans jQuery, utilisez simplement un sélecteur d'attribut comme

$('input[name="locationthemes"]:checked');

sélectionner toutes les entrées cochées avec le nom "locationthemes"

console.log($('input[name="locationthemes"]:checked').serialize());

//or

$('input[name="locationthemes"]:checked').each(function() {
   console.log(this.value);
});

Démo

Dans VanillaJS 

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
   console.log(cb.value); 
});

Démo

En ES6/opérateur spread

[...document.querySelectorAll('input[name="locationthemes"]:checked')]
   .forEach((cb) => console.log(cb.value));

Démo

148
fcalderan
$('input:checkbox[name=locationthemes]:checked').each(function() 
{
   // add $(this).val() to your array
});

Travailler Démo

OU 

Utilisez la fonction is() de jQuery:

$('input:checkbox[name=locationthemes]').each(function() 
{    
    if($(this).is(':checked'))
      alert($(this).val());
});

Le plus grand centre commercial

30
Talha

Utilisation de la fonction map de jquery

var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
            checkboxValues.Push($(this).val());
});
12
MaylorTaylor

La carte de la matrice est la plus rapide et la plus propre. 

var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })

retournera les valeurs sous forme de tableau comme:

array => [2,3]

en supposant que le château et la grange ont été vérifiés et les autres ne sont pas.

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

Source - Plus de détail

Obtenir la valeur des cases à cocher sélectionnées à l'aide de jQuery

Ensuite, nous écrivons un script jQuery pour obtenir la valeur de case à cocher sélectionnée dans un tableau utilisant jQuery each (). À l'aide de cette fonction jQuery, il exécute une boucle pour obtenir la valeur vérifiée et la placer 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>
1
thecodedeveloper.com

Donc tout en une ligne:

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

..a note concernant le sélecteur [id*="checkbox"], il prendra tout élément contenant la chaîne "case à cocher". Un peu maladroit ici, mais vraiment bon si vous essayez d'extraire les valeurs sélectionnées de quelque chose comme un .NET CheckBoxList. Dans ce cas, "case à cocher" serait le nom que vous avez donné au contrôle CheckBoxList.

1
mike
var voyageId = new Array(); 
$("input[name='voyageId[]']:checked:enabled").each(function () {
   voyageId.Push($(this).val());
});
0
Anmol Mourya
var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
     SlectedList.Push($(this).val());
});
0
Khurram Shaukat