Uzyskaj listę zaznaczonych pól wyboru w div za pomocą jQuery


231

Chcę uzyskać listę nazw pól wyboru, które są zaznaczone w div z określonym identyfikatorem. Jak miałbym to zrobić za pomocą jQuery?

Np. Dla tego div chcę uzyskać tablicę ["c_n_0"; „c_n_3”] lub ciąg znaków „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>

Odpowiedzi:


434

Połączenie dwóch poprzednich odpowiedzi:

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

10
i kolejna kombinacja: var selected = $ ('# checkboxes input: selected'). map (function (i, el) {return el.name;}). get (); // dodaj .join (';'), aby uzyskać połączony ciąg
roberkules

1
@Alex LE. Jak uzyskać tylko liczbę wybranych pól wyboru? Muszę tylko sprawdzić, czy którekolwiek z pól wyboru w div jest zaznaczone, czy nie.
ashishjmeshram

1
@Ashish. Po prostu napisz: var count = $ ('# checkboxes input: selected'). Length;
Alex LE

2
Niepotrzebne wywołanie konstruktora var selected = new Array();. Lepiej (taniej) zvar selected = [];
Pono

Jak włączyć tę changefunkcję?
Si8

54

Czy to by zrobiło?

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

9
$ (this) .checked nie działa. Użyj if ($ (this) .attr ('zaznaczone')) lub if ($ (this) .is (': zaznaczone'))
Stefan Steiger

czy .attr('checked')lub .prop('checked')czy .is(':checked')nie działa, spróbuj.get(0).checked
EMFI

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

da ci tablicę samych elementów. Jeśli potrzebujesz konkretnych nazw:

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

2
Myślę, że należy zwrócić this.name lub return $ (this) .attr ('name');
Jansen Cena

4
$("#checkboxes :checked").map(...)byłoby bardziej zwięzłe. Jak zauważa Jansen, powinno być $(this).attr("name"); ale rozważałbym prosty, this.namektóry powinien być równie kompatybilny.
Alex Barrett

1
To było świetne dla prostej mapy. Zmieniłem, childrenaby findspojrzeć głębiej i potrzebowałem tak użytych atrybutów jquery $(this) (i napisałem ten komentarz, gdy znów przyjdę szukać)
goodeye

24

Potrzebowałem liczby wszystkich zaznaczonych pól wyboru. Zamiast napisać pętlę, zrobiłem to

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

Porównaj to z całkowitą liczbą pól wyboru, aby zobaczyć, czy są one równe. Mam nadzieję, że to komuś pomoże


9

To działa dla mnie.

var selecteditems = [];

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

6

Możesz również nadać im te same nazwy, aby były tablicą , ale nadaj im różne wartości :

<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>

Następnie możesz uzyskać tylko wartość tylko zaznaczonych za pomocą mapy :

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

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>

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

Jaka jest zaleta tego rozwiązania?
Luis Gouveia
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.