jQuery obtém valores de caixas de seleção marcadas na matriz


129

Estou tentando obter valores de todas as caixas de seleção atualmente marcadas e armazená-las em uma matriz. Aqui esta o meu codigo ate agora:

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

No entanto, isso gera mais do que eu preciso. Não apenas obtenho os valores, mas outras coisas que não quero.

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002", prevObject: jQuery.fn.jQuery.init [3], contexto: documento, jquery: "1.9.1", construtor…

Gostaria apenas de IDs (3 primeiros itens neste caso).

Ao usar $.eache enviar valores para uma matriz, obtenho a saída desejada:

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

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

No entanto, eu gostaria de usar $.map, pois me salva uma linha de código e é mais bonita.

obrigado

Respostas:


261

Ligue .get()no final para transformar o objeto jQuery resultante em uma matriz verdadeira.

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

De acordo com a documentação :

Como o valor de retorno é um objeto jQuery, que contém uma matriz, é muito comum chamar .get () no resultado para trabalhar com uma matriz básica.


1
Eu estava esperando a verdadeira matriz de $.map. Obrigado pela solução, ele funciona.
se __name__ é None

Muito obrigado eu preciso isso para ma Ticketcenter
Steven

2
A coisa que eu não entendo sobre isso é por que .get()é necessário, quando a função está retornando o .val()de cada item na coleção jQuery. Isso ocorre porque o maptransforma novamente em um objeto jQuery antes de passá-lo para searchIDs?
Iconoclast

Podemos obter valor como tipo de matriz?
Krutssss

22

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

$(document).ready(function(){

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

      return $(this).val();

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

});

Basta chamar get () e você terá sua matriz como está escrito nas especificações: http://api.jquery.com/map/

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

18

Você precisa adicionar .toArray()ao final da sua .map()função

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

Demonstração: http://jsfiddle.net/sZQtL/


10

Refatorei um pouco o seu código e acredito que vim com a solução que você estava procurando. Basicamente, em vez de definir searchIDscomo o resultado do .map(), acabei de inserir os valores em uma matriz.

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

  var searchIDs = [];

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

  console.log(searchIDs);
});

Eu criei um violino com o código em execução.


5
     var ids = [];

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

Este funcionou para mim!


1

Os elementos do formulário necessários no HTML como uma matriz precisavam ser uma matriz no objeto javascript, como se o formulário tivesse sido realmente enviado.

Se houver um formulário com várias caixas de seleção, como:

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

O resultado é um objeto com:

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

E há muitas respostas aqui que ajudaram a melhorar meu código, mas elas eram muito complexas ou não queriam exatamente o que eu queria: Converter dados de formulário em objeto JavaScript com jQuery

Funciona, mas pode ser aprimorado: funciona apenas em matrizes unidimensionais e os índices resultantes podem não ser seqüenciais. A propriedade length de uma matriz retorna o próximo número de índice como o comprimento da matriz, não o comprimento real.

Espero que isso tenha ajudado. Namaste!


1
var idsArr = [];

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

console.log(idsArr);

0

Não use "each". É usado para operações e alterações no mesmo elemento. Use "map" para extrair dados do corpo do elemento e usá-los em outro lugar.


Os docs jQuery tem grandes exemplos para a maioria tudo, inclusivemap
jinglesthula

0

here allow é uma classe de caixas de seleção nas páginas e var permite as coleta em uma matriz, e você pode verificar se o loop for true foi verificado e executar a operação desejada individualmente. Aqui eu configurei a validade personalizada. Eu acho que vai resolver o seu problema.

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

}); 
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.