jQuery mendapatkan nilai kotak centang yang dicentang ke dalam array

129

Saya mencoba untuk mendapatkan nilai dari semua kotak centang yang saat ini diperiksa dan menyimpannya ke dalam array. Ini kode saya sejauh ini:

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

Namun ini menghasilkan lebih dari yang saya butuhkan. Saya tidak hanya mendapatkan nilai, tetapi beberapa hal lain yang tidak saya inginkan.

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002", prevObject: jQuery.fn.jQuery.init [3], konteks: dokumen, jquery: fungsi: ", fungsi: fungsi:"

Saya ingin hanya ID (3 item pertama dalam kasus ini).

Dengan menggunakan $.eachdan mendorong nilai ke array saya mendapatkan output yang diinginkan:

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

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

Namun saya ingin menggunakan $.map, karena menghemat satu baris kode dan lebih cantik.

Terima kasih

jika __name__ Tidak Ada
sumber

Jawaban:

261

Panggil .get()di bagian paling akhir untuk mengubah objek jQuery yang dihasilkan menjadi array yang benar.

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

Per dokumentasi :

Karena nilai balik adalah objek jQuery, yang berisi larik, sangat umum untuk memanggil .get () pada hasil untuk bekerja dengan larik dasar.

Andrew Whitaker
sumber
1
Saya mengharapkan Array sejati dari $.map. Terima kasih atas solusinya, ini berhasil.
jika __name__ Tidak Ada
Terima kasih banyak, saya butuh ini untuk Ticketcenter ma
Steven
2
Hal yang saya tidak dapatkan tentang ini adalah mengapa .get()diperlukan, ketika fungsi mengembalikan .val()dari setiap item dalam koleksi jQuery. Apakah ini karena mapmengubahnya kembali menjadi objek jQuery sebelum meneruskannya searchIDs?
iconoclast
Bisakah kita mendapatkan nilai sebagai tipe array?
krutssss
22

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

$(document).ready(function(){

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

      return $(this).val();

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

});

Panggil saja get () dan Anda akan memiliki array Anda seperti yang tertulis dalam spesifikasi: http://api.jquery.com/map/

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

Anda harus menambahkan .toArray()ke akhir .map()fungsi Anda

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

tymeJV
sumber
10

Saya refactored kode Anda sedikit dan percaya saya datang dengan solusi yang Anda cari. Pada dasarnya alih-alih menetapkan searchIDsmenjadi hasil dari .map()saya hanya mendorong nilai-nilai ke dalam array.

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

  var searchIDs = [];

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

  console.log(searchIDs);
});

Saya membuat biola dengan kode berjalan.

Mark Meyer
sumber
5
     var ids = [];

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

Yang ini berhasil untuk saya!

Bandara Thalinda
sumber
1

Diperlukan elemen form yang disebut dalam HTML sebagai array untuk menjadi array dalam objek javascript, seolah-olah form itu benar-benar dikirimkan.

Jika ada formulir dengan beberapa kotak centang seperti:

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

Hasilnya adalah objek dengan:

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

Dan ada banyak jawaban di sini yang membantu meningkatkan kode saya, tetapi mereka terlalu kompleks atau tidak persis ingin saya inginkan: Konversi data formulir ke objek JavaScript dengan jQuery

Bekerja tetapi dapat ditingkatkan: hanya bekerja pada array satu dimensi dan indeks yang dihasilkan mungkin tidak berurutan. Properti panjang array mengembalikan nomor indeks berikutnya sebagai panjang array, bukan panjang sebenarnya.

Semoga ini bisa membantu. Namaste!

i_a
sumber
1
var idsArr = [];

$('#tableID').find('input[type=checkbox]:checked').each(function() {
    idsArr .push(this.value);
});

console.log(idsArr);
Qammar Feroz
sumber
0

Jangan gunakan "masing-masing". Ini digunakan untuk operasi dan perubahan pada elemen yang sama. Gunakan "peta" untuk mengekstrak data dari elemen tubuh dan menggunakannya di tempat lain.

MItrajyoti Kusari
sumber
Dokumen jQuery memiliki contoh-contoh hebat untuk hampir semua hal, termasukmap
jinglesthula
0

di sini memungkinkan adalah kelas kotak centang pada halaman dan var memungkinkan mengumpulkan mereka dalam array dan Anda dapat memeriksa diperiksa benar dalam untuk loop kemudian melakukan operasi yang diinginkan secara individual. Di sini saya telah menetapkan validitas khusus. Saya pikir itu akan menyelesaikan masalah Anda.

  $(".allows").click(function(){
   var allows = document.getElementsByClassName('allows');
   var chkd   = 0;  
   for(var i=0;i<allows.length;i++)
   {
       if(allows[i].checked===true)
       {
           chkd = 1;
       }else
       {

       }
   }

   if(chkd===0)
   {
       $(".allows").prop("required",true);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("Please select atleast one option");
        }

   }else
   {
       $(".allows").prop("required",false);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("");
        }
   }

}); 
Manish
sumber