jQuery pobiera wartości zaznaczonych pól wyboru do tablicy

Question

Próbuję uzyskać wartości wszystkich pól wyboru, które są obecnie zaznaczone i przechowywać je w tablicy. Oto mój kod do tej pory:

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

Jednak to generuje więcej niż muszę. Dostaję nie tylko wartości, ale i inne rzeczy, których nie chcę.

[ "51729b62c9f2673e4c000004", "517299e7c9f26782a7000003" "51729975c9f267f3b5000002" prevObject: jQuery.fn.jQuery.init [3] kontekst: Dokument jQuery "1.9.1" konstruktor: funkcja init: funkcja ...]

Chciałbym tylko identyfikatory (pierwsze 3 pozycje w tym przypadku).

Stosując $.each i popychając wartości tablicy uzyskać pożądany wynik:

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

[ "51729b62c9f2673e4c000004", "517299e7c9f26782a7000003" "51729975c9f267f3b5000002"]

Jednakże I” Chciałbym użyć $.map, ponieważ zapisuje mi linię kodu i jest ładniejsza.

Dzięki

Answer 1

połączeń .get() na samym końcu, aby włączyć wynikowy obiekt jQuery w prawdziwym szyk.

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

Per the documentation:

jako wartość zwracana jest obiektem jQuery, która zawiera tablicę, To bardzo często wywołać .get() w wyniku pracy z podstawowej tablicy.

Answer 2

Trzeba dodać .toArray() do końca swojej funkcji .map()

$("#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/

Answer 3

Przebudowałem trochę kod i uważam, że znalazłem rozwiązanie, na które patrzysz. Zasadniczo zamiast ustawić searchIDs na wynik .map() po prostu wepchnąłem wartości do tablicy.

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

    var searchIDs = []; 

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

    console.log(searchIDs); 
}); 

Utworzono kod fiddle z uruchomionym kodem.

Answer 4

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

$(document).ready(function(){ 

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

     return $(this).val(); 

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

}); 

Wystarczy zadzwonić get() i będziesz miał swoją tablicę, jak jest napisane w specyfikacji: http://api.jquery.com/map/

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

Answer 5

Nie używaj "każdy". Jest on używany do operacji i zmian w tym samym elemencie. Użyj „map”, aby wyodrębnić dane z korpusu elementu i używając go gdzieś indziej.

Answer 6

Potrzebne elementy formularza nazwanych w HTML jako tablicę być tablicą w obiekcie javascript, jak gdyby forma była faktycznie złożone.

Jeśli istnieje forma z wieloma wyboru takich jak:

<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.'/> 
... 

wynik jest obiektem z:

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(); 
}); 

I istnieje mnóstwo odpowiedzi tutaj, które pomogły poprawić swój kod, ale były albo zbyt skomplikowane, albo zupełnie nie chciałem: Convert form data to JavaScript object with jQuery

Działa, ale można go ulepszyć: działa tylko na jednowymiarowych tablicach i na Indeksy mogą nie być sekwencyjne. Nieruchomość długość tablicy zwraca następny numer indeksu, ponieważ długość tablicy, a nie faktycznie długości.

Mam nadzieję, że to pomogło. Namaste!

Answer 7

 var ids = []; 

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

Ten działał dla mnie!