Verwenden Sie jQuery, um Werte ausgewählter Kontrollkästchen abzurufen

82

Ich möchte die Kontrollkästchengruppe 'locationthemes' durchlaufen und eine Zeichenfolge mit allen ausgewählten Werten erstellen. Wenn also die Kontrollkästchen 2 und 4 aktiviert sind, lautet das Ergebnis: "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>

Ich habe hier nachgesehen: http://api.jquery.com/checked-selector/, aber es gibt kein Beispiel dafür, wie eine Kontrollkästchengruppe anhand ihres Namens ausgewählt wird.

Wie kann ich das machen?

javascript jquery Flo
quelle

Antworten:

175

Verwenden Sie in jQuery einfach einen Attributselektor wie

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

um alle markierten Eingaben mit dem Namen "locationthemes" auszuwählen

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

//or

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

Demo

In VanillaJS 

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

Demo

In ES6 / Spread-Operator

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

Demo

Fabrizio Calderan
quelle
5
Du, mein Freund, bist ein Lebensretter.
Haring10
Besonders gefällt mir die Idee, die Konsolenprotokolle zu verwenden. Dank dafür.
Also S
32 
$('input:checkbox[name=locationthemes]:checked').each(function() 
{
   // add $(this).val() to your array
});

Arbeits Demo

ODER

Verwenden Sie die is()Funktion von jQuery :

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

Wenn Sie

Talha
quelle
18

Die Zuordnung des Arrays ist am schnellsten und saubersten. 

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

gibt Werte als Array zurück wie:

array => [2,3]

vorausgesetzt, Burg und Scheune wurden überprüft und die anderen nicht.

Steffan Perry
quelle
12

Verwenden der mapFunktion von jquery

var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
            checkboxValues.push($(this).val());
});
MaylorTaylor
quelle
mit dem Verständnis, dass checkboxName in diesem Beispiel "locationthemes" sein sollte
hrabinowitz
12

$("#locationthemes").prop("checked")

usr4217
quelle
Dies sollte ein Kommentar sein
Gajendra K Chauhan
5 
You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();
Tushar Sagar
quelle
1
Wie man dieses Ergebnis in Variable
zuordnet
2

Also alles in einer Zeile:

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

..ein Hinweis zum Selektor [id*="checkbox"], es wird jedes Element mit der Zeichenfolge "Checkbox" darin greifen. Ein bisschen ungeschickt hier, aber wirklich gut, wenn Sie versuchen, die ausgewählten Werte aus einer .NET CheckBoxList zu ziehen. In diesem Fall ist "Checkbox" der Name, den Sie dem CheckBoxList-Steuerelement gegeben haben.

Mike
quelle
1
Dies ist nützlich @mike
Yii2Developer
2 
var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
     SlectedList.push($(this).val());
});
Khurram Shaukat
quelle
1
Bitte geben Sie eine Erklärung mit Ihrer Antwort.
Word Rearranger
1 
var voyageId = new Array(); 
$("input[name='voyageId[]']:checked:enabled").each(function () {
   voyageId.push($(this).val());
});
Anmol Mourya
quelle
Ein Upgrade:var voyageIds = $('input[name="voyageId[]"]:checked:enabled').map(function() {return this.value; }).get();
William
1

Quelle - Mehr Details

Wert für ausgewählte Kontrollkästchen mit jQuery abrufen

Dann schreiben wir ein jQuery-Skript, um den ausgewählten Kontrollkästchenwert in einem Array mit jQuery each () abzurufen. Mit dieser jQuery-Funktion wird eine Schleife ausgeführt, um den überprüften Wert abzurufen und in ein Array einzufügen. 

<!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>
thecodedeveloper.com
quelle
0

Jquery 3.3.1, Werte für alle aktivierten Kontrollkästchen beim Klicken auf die Schaltfläche abrufen

$(document).ready(function(){
 $(".btn-submit").click(function(){
  $('.cbCheck:checkbox:checked').each(function(){
	alert($(this).val())
  });
 });			
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="vehicle1" name="vehicle1"  class="cbCheck" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2"  class="cbCheck" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3"  class="cbCheck" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit" class="btn-submit">
Erweitern Sie das Snippet

Bhanu Pratap
quelle
0

Ein bisschen moderner:

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

Wir finden zuerst alle ausgewählten Kontrollkästchen mit dem angegebenen Namen, und dann durchläuft jQuerys map () jedes von ihnen, ruft den Rückruf auf, um den Wert abzurufen, und gibt das Ergebnis als neue jQuery-Auflistung zurück, die jetzt die Kontrollkästchenwerte enthält. Wir rufen dann get () auf, um ein Array von Werten abzurufen, und join (), um sie zu einer einzigen Zeichenfolge zu verketten, die dann der Konstante selectedValues ​​zugewiesen wird.

ivanhoe
quelle