Rufen Sie mit jQuery eine Liste der aktivierten Kontrollkästchen in einem div ab

231

Ich möchte eine Liste mit Namen von Kontrollkästchen erhalten, die in einem Div mit einer bestimmten ID ausgewählt sind. Wie würde ich das mit jQuery machen?

Zum Beispiel möchte ich für dieses div Array ["c_n_0"; "c_n_3"] oder eine Zeichenfolge "c_n_0; c_n_3"

<div id="checkboxes">
    <input id="chkbx_0" type="checkbox" name="c_n_0" checked="checked" />Option 1
    <input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2
    <input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3
    <input id="chkbx_3" type="checkbox" name="c_n_3" checked="checked" />Option 4
</div>

jquery checkbox jquery-selectors Juozas Kontvainis
quelle

434

Kombination von zwei vorherigen Antworten:

var selected = [];
$('#checkboxes input:checked').each(function() {
    selected.push($(this).attr('name'));
});

Alex LE
quelle

10

und eine andere Kombination: var selected = $ ('# checkboxes input: checked'). map (Funktion (i, el) {return el.name;}). get (); // füge .join (';') hinzu, um einen kombinierten String zu erhalten

roberkules

1

@ Alex LE. Wie erhalte ich nur die Anzahl der ausgewählten Kontrollkästchen? Ich muss nur überprüfen, ob eines der Kontrollkästchen im div aktiviert ist oder nicht.

Ashishjmeshram

1

@ Ashish. Schreiben Sie einfach: var count = $ ('# Checkboxen eingeben: aktiviert'). Länge;

Alex LE

2

Unnötiger Aufruf des Konstruktors var selected = new Array();. Besser (billiger) mitvar selected = [];

Pono

Wie bekomme ich es auf changeFunktion?

Si8

54

Würde das reichen?

var selected = [];
$('div#checkboxes input[type=checkbox]').each(function() {
   if ($(this).is(":checked")) {
       selected.push($(this).attr('name'));
   }
});

nikc.org
quelle

9

$ (this) .checked funktioniert nicht. Verwenden Sie if ($ (this) .attr ('geprüft')) oder if ($ (this) .is (': geprüft'))

Stefan Steiger

wenn .attr('checked')oder .prop('checked')oder .is(':checked')nicht funktioniert, versuchen.get(0).checked

EMFi

37

$("#checkboxes").children("input:checked")

gibt Ihnen eine Reihe der Elemente selbst. Wenn Sie nur speziell die Namen benötigen:

$("#checkboxes").children("input:checked").map(function() {
    return this.name;
});

Corey
quelle

2

Ich denke, das sollte this.name oder $ (this) .attr ('name') zurückgeben;

Jansen Price

4

$("#checkboxes :checked").map(...)wäre prägnanter. Wie Jansen betont, sollte es sein $(this).attr("name"); aber ich würde eine einfache this.namein Betracht ziehen, die genauso kompatibel sein sollte.

Alex Barrett

1

Das war großartig für die einfache Karte. Ich wechselte childrenzu find, um tiefer zu schauen, und brauchte so verwendete jquery-Attribute $(this) (und schrieb diesen Kommentar, wenn ich wieder schaue ...)

goodeye

24

Ich brauchte die Anzahl aller Kontrollkästchen, die aktiviert sind. Anstatt eine Schleife zu schreiben, habe ich das getan

$(".myCheckBoxClass:checked").length;

Vergleichen Sie es mit der Gesamtzahl der Kontrollkästchen, um festzustellen, ob sie gleich sind. Hoffe es wird jemandem helfen

Usman Shaukat
quelle

9

Das funktioniert bei mir.

var selecteditems = [];

$("#Div").find("input:checked").each(function (i, ob) { 
    selecteditems.push($(ob).val());
});

Ricardo
quelle

6

Sie können ihnen auch alle den gleichen Namen geben, damit sie ein Array sind , aber ihnen unterschiedliche Werte geben :

<div id="checkboxes">
    <input type="checkbox" name="c_n[]" value="c_n_0" checked="checked" />Option 1
    <input type="checkbox" name="c_n[]" value="c_n_1" />Option 2
    <input type="checkbox" name="c_n[]" value="c_n_2" />Option 3
    <input type="checkbox" name="c_n[]" value="c_n_3" checked="checked" />Option 4
</div>

Mit map können Sie dann nur den Wert der angekreuzten Werte ermitteln :

$('#checkboxes input:checked[name="c_n[]"]')
            .map(function () { return $(this).val(); }).get()

SharpC
quelle

0

function listselect() {
                var selected = [];
                $('.SelectPhone').prop('checked', function () {

                    selected.push($(this).val());
                });

                alert(selected.length);

     <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="1" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="2" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="3" />
        <button onclick="listselect()">show count</button>

Jamaljaj
quelle

0

 var agencias = [];
 $('#Div input:checked').each(function(index, item){
 agencias.push(item.nextElementSibling.attributes.for.nodeValue);
 });

David Blanco
quelle

Was ist der Vorteil dieser Lösung?

Luis Gouveia