JQuery kullanarak bir div'de işaretli onay kutularının listesini alma

231

Belirli bir kimliğe sahip bir div'de seçilen onay kutularının adlarının bir listesini almak istiyorum. Bunu jQuery kullanarak nasıl yapabilirim?

Örneğin, bu div için dizi ["c_n_0" almak istiyorum; "c_n_3"] veya "c_n_0; c_n_3" dizesi

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

434

Önceki iki cevabın kombinasyonu:

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

— Alex LE
kaynak

10

ve başka bir birleşik: var seçilmiş = $ ('# onay kutusu girişi: işaretli'). harita (işlev (i, el) {dönüş el.name;}). get (); // birleştirilmiş dize almak için .join (';') ekleyin

— roberkules

1

@Alex LE. Yalnızca seçili onay kutularının sayısını nasıl alırım? Sadece div içindeki onay kutularından herhangi birinin işaretli olup olmadığını kontrol etmem gerekiyor.

— ashishjmeshram

1

@Ashish. Sadece şunu yazın: var count = $ ('# onay kutusu girişi: işaretli'). Uzunluk;

— Alex LE

2

Gereksiz kurucu çağrısı var selected = new Array();. Daha iyi (daha ucuz) ilevar selected = [];

— Pono

İşleve nasıl changegetirebilirim?

— Si8

54

Bu olur mu?

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

— nikc.org
kaynak

9

$ (this) .checked çalışmıyor. İf ($ (this) .attr ('işaretlendi')) veya if ($ (bu) .is (': işaretlendi'))

— Stefan Steiger

eğer .attr('checked')veya .prop('checked')veya .is(':checked')does not iş, deneyin.get(0).checked

— EMFI

37

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

size öğelerin bir dizi verecektir. Özellikle isimlere ihtiyacınız varsa:

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

— Corey
kaynak

2

Bunun this.name veya $ (this) .attr ('name') döndürmesi gerektiğini düşünüyorum;

— Jansen Fiyatı

4

$("#checkboxes :checked").map(...)daha özlü olur. Jansen'in belirttiği gibi $(this).attr("name"); ama ben this.namede aynı derecede uyumlu bir basit düşünürdüm .

— Alex Barrett

1

Bu basit harita için harikaydı. Daha derin görünmek childreniçin değiştim findve çok kullanılan jquery özelliklerine ihtiyacım vardı $(this) (ve tekrar baktığımda bu yorumu yazdım ...)

— goodeye

24

İşaretli olan tüm onay kutularının sayısına ihtiyacım vardı. Bir döngü yazmak yerine bunu yaptım

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

Eşit olup olmadığını görmek için toplam onay kutusu sayısıyla karşılaştırın. Umarım birine yardım eder

— Usman Shaukat
kaynak

9

Bu benim için çalışıyor.

var selecteditems = [];

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

— Ricardo
kaynak

6

Ayrıca onlara aynı adı verebilir, böylece bir dizi olurlar , ancak onlara farklı değerler verirsiniz :

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

Daha sonra haritayı kullanarak yalnızca işaretli olanların değerini alabilirsiniz :

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

— SharpC
kaynak

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
kaynak

0

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

— David Blanco
kaynak

Bu çözümün avantajı nedir?

— Luis Gouveia