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

Question 1

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?

Question 2

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

Question 3

$('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

Question 4

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.

Question 5

Verwenden der mapFunktion von jquery

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

Question 6

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

Question 7

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

Question 8

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.

Question 9

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

Question 10

var voyageId = new Array(); 
$("input[name='voyageId[]']:checked:enabled").each(function () {
   voyageId.push($(this).val());
});

Question 11

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>

Question 12

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

Question 13

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.