jQuery ruft Werte von aktivierten Kontrollkästchen in das Array ab

127

Ich versuche, Werte aller derzeit aktivierten Kontrollkästchen abzurufen und in einem Array zu speichern. Hier ist mein Code bisher:

 $("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    });
    console.log(searchIDs);
  });

Dies gibt jedoch mehr aus als ich brauche. Ich bekomme nicht nur die Werte, sondern auch einige andere Dinge, die ich nicht will.

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002", prevObject: jQuery.fn.jQuery.init [3], Kontext: Dokument, jQuery: ": Funktion:]

Ich möchte nur Ausweise (die ersten 3 Artikel in diesem Fall).

Durch Verwenden $.eachund Verschieben von Werten in ein Array erhalte ich die gewünschte Ausgabe:

$("#find-table input:checkbox:checked").each(function(){ myArray.push($(this).val()); })

[51729b62c9f2673e4c000004, 517299e7c9f26782a7000003, 51729975c9f267f3b5000002]

Ich würde es jedoch gerne verwenden $.map, da es mir eine Codezeile erspart und hübscher ist.

Vielen Dank

wenn __name__ None ist
quelle

Antworten:

260

Rufen Sie ganz .get()am Ende auf, um das resultierende jQuery-Objekt in ein echtes Array umzuwandeln.

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    }).get(); // <----
    console.log(searchIDs);
});

Gemäß der Dokumentation :

Da der Rückgabewert ein jQuery-Objekt ist, das ein Array enthält, wird häufig .get () für das Ergebnis aufgerufen, um mit einem Basisarray zu arbeiten.

Andrew Whitaker
quelle
1
Ich hatte echtes Array von erwartet $.map. Danke für die Lösung, es funktioniert.
wenn __name__ None ist
Vielen Dank, ich brauche dies für ma Ticketcenter
Steven
2
Das, was ich nicht verstehe, ist, warum das .get()benötigt wird, wenn die Funktion das .val()von jedem Element in der jQuery-Auflistung zurückgibt. Liegt das daran, dass mapes wieder in ein jQuery-Objekt umgewandelt wird, bevor es übergeben wird searchIDs?
Bilderstürmer
Können wir einen Wert als Array-Typ erhalten?
krutssss
21

DEMO: http://jsfiddle.net/PBhHK/

$(document).ready(function(){

    var searchIDs = $('input:checked').map(function(){

      return $(this).val();

    });
    console.log(searchIDs.get());

});

Rufen Sie einfach get () auf und Sie haben Ihr Array so, wie es in den Spezifikationen beschrieben ist: http://api.jquery.com/map/

$(':checkbox').map(function() {
      return this.id;
    }).get().join();
Cristi Pufu
quelle
18

Sie müssen .toArray()am Ende Ihrer .map()Funktion hinzufügen

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
        return $(this).val();
    }).toArray();
    console.log(searchIDs);
});

Demo: http://jsfiddle.net/sZQtL/

tymeJV
quelle
10

Ich habe Ihren Code ein wenig überarbeitet und glaube, ich bin mit der Lösung gekommen, nach der Sie gesucht haben. Anstatt die Einstellung searchIDsals Ergebnis der zu setzen, habe .map()ich die Werte einfach in ein Array verschoben.

$("#merge_button").click(function(event){
  event.preventDefault();

  var searchIDs = [];

  $("#find-table input:checkbox:checked").map(function(){
    searchIDs.push($(this).val());
  });

  console.log(searchIDs);
});

Ich habe eine Geige mit dem laufenden Code erstellt.

Mark Meyer
quelle
5
     var ids = [];

$('input[id="find-table"]:checked').each(function() {
   ids.push(this.value); 
});

Dieser hat für mich gearbeitet!

Thalinda Bandara
quelle
1

Die im HTML als Array genannten Formularelemente mussten ein Array im Javascript-Objekt sein, als ob das Formular tatsächlich gesendet worden wäre.

Wenn es ein Formular mit mehreren Kontrollkästchen gibt, z.

<input name='breath[0]' type='checkbox' value='presence0'/>
<input name='breath[1]' type='checkbox' value='presence1'/>
<input name='breath[2]' type='checkbox' value='presence2'/>
<input name='serenity'  type='text' value='Is within the breath.'/>
...

Das Ergebnis ist ein Objekt mit:

data = {
   'breath':['presence0','presence1','presence2'],
   'serenity':'Is within the breath.'
}


var $form = $(this),
    data  = {};

$form.find("input").map(function()
{
    var $el  = $(this),
        name = $el.attr("name");

    if (/radio|checkbox/i.test($el.attr('type')) && !$el.prop('checked'))return;

    if(name.indexOf('[') > -1)
    {
        var name_ar = name.split(']').join('').split('['),
            name    = name_ar[0],
            index   = name_ar[1];

        data[name]  = data[name] || [];
        data[name][index] = $el.val();
    }
    else data[name] = $el.val();
});

Und hier gibt es unzählige Antworten, die dazu beigetragen haben, meinen Code zu verbessern, aber sie waren entweder zu komplex oder wollten nicht genau das, was ich wollte: Konvertieren Sie Formulardaten mit jQuery in ein JavaScript-Objekt

Funktioniert, kann aber verbessert werden: Funktioniert nur mit eindimensionalen Arrays und die resultierenden Indizes sind möglicherweise nicht sequentiell. Die Länge-Eigenschaft eines Arrays gibt die nächste Indexnummer als Länge des Arrays zurück, nicht als tatsächliche Länge.

Hoffe das hat geholfen. Namaste!

i_a
quelle
1
var idsArr = [];

$('#tableID').find('input[type=checkbox]:checked').each(function() {
    idsArr .push(this.value);
});

console.log(idsArr);
Qammar Feroz
quelle
0

Verwenden Sie nicht "jeder". Es wird für Operationen und Änderungen im selben Element verwendet. Verwenden Sie "map", um Daten aus dem Elementkörper zu extrahieren und an einer anderen Stelle zu verwenden.

MItrajyoti Kusari
quelle
Die jQuery-Dokumente haben großartige Beispiele für fast alles, einschließlichmap
jinglesthula
0

Hier ist eine Klasse von Kontrollkästchen auf Seiten zulässig, und var ermöglicht das Sammeln dieser Kontrollkästchen in einem Array. Sie können überprüfen, ob die for-Schleife aktiviert ist, und dann die gewünschte Operation einzeln ausführen. Hier habe ich die benutzerdefinierte Gültigkeit festgelegt. Ich denke, es wird Ihr Problem lösen.

  $(".allows").click(function(){
   var allows = document.getElementsByClassName('allows');
   var chkd   = 0;  
   for(var i=0;i<allows.length;i++)
   {
       if(allows[i].checked===true)
       {
           chkd = 1;
       }else
       {

       }
   }

   if(chkd===0)
   {
       $(".allows").prop("required",true);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("Please select atleast one option");
        }

   }else
   {
       $(".allows").prop("required",false);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("");
        }
   }

}); 
Manish
quelle