jQuery obtiene valores de casillas marcadas en la matriz


129

Estoy tratando de obtener valores de todas las casillas de verificación que están marcadas actualmente y almacenarlas en una matriz. Aquí está mi código hasta ahora:

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

Sin embargo, esto genera más de lo que necesito. No solo obtengo los valores, sino algunas otras cosas que no quiero.

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002", prevObject: jQuery.fn.jQuery.init [3], contexto: documento, jquery: "1.9.1", función: constructor: función ...

Me gustaría solo las identificaciones (primeros 3 artículos en este caso).

Al usar $.eachy empujar valores a una matriz obtengo la salida deseada:

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

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

Sin embargo, me gustaría usar $.map, ya que me ahorra una línea de código y es más bonita.

Gracias

Respuestas:


261

Llame .get()al final para convertir el objeto jQuery resultante en una verdadera matriz.

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

Por la documentación :

Como el valor de retorno es un objeto jQuery, que contiene una matriz, es muy común llamar a .get () en el resultado para trabajar con una matriz básica.


1
Esperaba una verdadera matriz de $.map. Gracias por la solución, funciona.
si __name__ es None

Muchas gracias, necesito esto para mi Ticketcenter
Steven

2
Lo que no entiendo acerca de esto es por qué .get()es necesario, cuando la función está devolviendo el .val()de cada elemento en la colección jQuery. ¿Es esto porque lo mapconvierte de nuevo en un objeto jQuery antes de pasarlo searchIDs?
iconoclasta

¿Podemos obtener 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());

});

Simplemente llame a get () y tendrá su matriz tal como está escrita en las especificaciones: http://api.jquery.com/map/

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

18

Necesita agregar .toArray()al final de su .map()función

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

Demostración: http://jsfiddle.net/sZQtL/


10

Reformé un poco su código y creo que llegué con la solución que estaba buscando. Básicamente, en lugar de establecer searchIDsque sea el resultado de .map()que acabo de insertar los valores en una matriz.

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

  var searchIDs = [];

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

  console.log(searchIDs);
});

Creé un violín con el código en ejecución.


5
     var ids = [];

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

¡Este funcionó para mí!


1

Se necesitaban los elementos del formulario nombrados en el HTML como una matriz para ser una matriz en el objeto javascript, como si el formulario se hubiera enviado realmente.

Si hay un formulario con varias casillas de verificación 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.'/>
...

El resultado es un objeto con:

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

Y hay toneladas de respuestas aquí que ayudaron a mejorar mi código, pero eran demasiado complejas o no querían exactamente lo que quería: convertir datos de formulario a objetos JavaScript con jQuery

Funciona pero se puede mejorar: solo funciona en matrices unidimensionales y los índices resultantes pueden no ser secuenciales. La propiedad de longitud de una matriz devuelve el siguiente número de índice como la longitud de la matriz, no la longitud real.

Espero que esto haya ayudado. Namaste!


1
var idsArr = [];

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

console.log(idsArr);

0

No use "cada uno". Se utiliza para operaciones y cambios en el mismo elemento. Use "map" para extraer datos del cuerpo del elemento y usarlo en otro lugar.


Los documentos de jQuery tienen excelentes ejemplos para casi todo, inclusomap
jinglesthula el

0

here allow es una clase de casillas de verificación en las páginas y var permite que las recopile en una matriz, y puede verificar si se ha verificado el bucle verdadero y luego realizar la operación deseada individualmente. Aquí he establecido la validez personalizada. Creo que resolverá tu 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("");
        }
   }

}); 
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.