Dapatkan daftar kotak centang yang dicentang di div menggunakan jQuery

231

Saya ingin mendapatkan daftar nama kotak centang yang dipilih dalam div dengan id tertentu. Bagaimana saya melakukannya menggunakan jQuery?

Misalnya, untuk div ini saya ingin mendapatkan array ["c_n_0"; "c_n_3"] atau string "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
sumber

434

Kombinasi dua jawaban sebelumnya:

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

— Alex LE
sumber

10

dan kombo lain: var selected = $ ('# checkbox input: checked'). map (function (i, el) {return el.name;}). get (); // tambahkan .join (';') untuk mendapatkan string gabungan

— roberkules

1

@Alex LE. Bagaimana cara saya hanya mendapatkan hitungan kotak centang yang dipilih? Saya hanya perlu memeriksa apakah ada kotak centang di dalam div dicentang atau tidak.

— ashishjmeshram

1

@Ashish. Tulis saja: var count = $ ('# kotak centang input: dicentang'). Length;

— Alex LE

2

Panggilan konstruktor yang tidak perlu var selected = new Array();. Lebih baik (lebih murah) denganvar selected = [];

— Pono

Bagaimana cara changemengaktifkannya?

— Si8

54

Apakah ini akan berhasil?

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

— nikc.org
sumber

9

$ (ini) .checked tidak berfungsi. Gunakan if ($ (this) .attr ('checked')) atau if ($ (this) .is (': checked'))

— Stefan Steiger

jika .attr('checked')atau .prop('checked')atau .is(':checked')tidak bekerja, coba.get(0).checked

— emfi

37

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

akan memberi Anda array elemen itu sendiri. Jika Anda hanya perlu namanya saja:

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

— Corey
sumber

2

Saya pikir itu harus mengembalikan this.name atau mengembalikan $ (ini) .attr ('name');

— Harga Jansen

4

$("#checkboxes :checked").map(...)akan lebih ringkas. Seperti yang ditunjukkan Jansen, seharusnya $(this).attr("name"); tapi saya akan mempertimbangkan yang sederhana this.nameyang harus sama kompatibel.

— Alex Barrett

1

Ini bagus untuk peta sederhana. Saya berubah childrenuntuk findmelihat lebih dalam, dan memerlukan atribut jquery yang sudah digunakan $(this) (dan menulis komentar ini ketika saya datang mencari lagi ...)

— selamat tinggal

24

Saya membutuhkan hitungan semua kotak centang yang dicentang. Alih-alih menulis loop saya melakukan ini

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

Bandingkan dengan jumlah total kotak centang untuk melihat apakah mereka sama. Semoga ini bisa membantu seseorang

— Usman Shaukat
sumber

9

Ini bekerja untuk saya.

var selecteditems = [];

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

— Ricardo
sumber

6

Anda juga bisa memberi mereka semua nama yang sama sehingga array , tetapi memberi mereka nilai yang berbeda :

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

Anda kemudian bisa mendapatkan hanya nilai yang dicentang menggunakan peta :

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

— SharpC
sumber

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
sumber

0

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

— David Blanco
sumber

Apa keuntungan dari solusi ini?

— Luis Gouveia