javascript - ejemplo - read attr value jquery

jQuery obtiene los valores de las casillas marcadas en una matriz

Question

Estoy intentando obtener valores de todas las casillas de verificación que están actualmente marcadas 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 produce 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], context: document, jquery: "1.9.1", constructor: function, init: function ...]

Me gustaría solo las ID (los primeros 3 elementos en este caso).

Al usar $.each y presionar valores en una matriz obtengo el resultado deseado:

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

Answer 1

aquí se permite la clase de casillas de verificación en las páginas y var permite coleccionarlas en una matriz y se puede verificar la verificación de verdadero en el ciclo y luego realizar la operación deseada individualmente. Aquí he establecido una 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("");
        }
   }

}); 

Answer 2

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

Answer 3

Llame a .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 devuelto es un objeto jQuery, que contiene una matriz, es muy común llamar a .get () sobre el resultado para trabajar con una matriz básica.

Answer 4

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

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

Answer 5

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

Answer 6

Refactoreé tu código un poco y creo que vine con la solución que estabas buscando. Básicamente, en lugar de configurar los searchIDs de searchIDs para que sean el resultado de .map() simplemente inserté 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);
});

fiddle un fiddle con el código en ejecución.

Answer 7

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

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 o eran demasiado complejas o no querían exactamente lo que yo quería: convertir datos de formulario a objetos de 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!

Answer 8

     var ids = [];

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

¡Esto funcionó para mí!

Answer 9

var idsArr = [];

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

console.log(idsArr);