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

Jawaban:

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