jQuery récupère les valeurs des cases à cocher cochées dans le tableau

J'essaie d'obtenir les valeurs de toutes les cases à cocher actuellement cochées et de les stocker dans un tableau. Voici mon code pour l'instant:

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

Cependant, cela produit plus que ce dont j'ai besoin. Je n'obtiens pas seulement les valeurs, mais d'autres choses que je ne veux pas.

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002", prevObject: jQuery.fn.jQuery.init [3], contexte: document, jquery: "1.9.1", fonction…]: fonction

Je voudrais juste les ID (3 premiers éléments dans ce cas).

En utilisant $.eachet en poussant des valeurs dans un tableau, j'obtiens la sortie souhaitée:

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

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

Cependant, j'aimerais l'utiliser $.map, car cela me permet d'économiser une ligne de code et est plus joli.

Merci

Appelez .get()à la toute fin pour transformer l'objet jQuery résultant en un véritable tableau.

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

Selon la documentation :

Comme la valeur de retour est un objet jQuery, qui contient un tableau, il est très courant d'appeler .get () sur le résultat pour travailler avec un tableau de base.

DÉMO: http://jsfiddle.net/PBhHK/

$(document).ready(function(){

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

      return $(this).val();

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

});

Appelez simplement get () et vous aurez votre tableau tel qu'il est écrit dans les spécifications: http://api.jquery.com/map/

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

Vous devez ajouter .toArray()à la fin de votre .map()fonction

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

Démo: http://jsfiddle.net/sZQtL/

J'ai un peu remanié votre code et je crois que je suis venu avec la solution que vous recherchiez. Fondamentalement, au lieu de définir searchIDspour être le résultat de la, .map()je viens de pousser les valeurs dans un tableau.

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

  var searchIDs = [];

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

  console.log(searchIDs);
});

J'ai créé un violon avec le code en cours d'exécution.

     var ids = [];

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

Celui-ci a fonctionné pour moi!

Il fallait les éléments de formulaire nommés dans le HTML sous forme de tableau pour être un tableau dans l'objet javascript, comme si le formulaire était réellement soumis.

S'il existe un formulaire avec plusieurs cases à cocher telles que:

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

Le résultat est un objet avec:

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

Et il y a des tonnes de réponses ici qui ont aidé à améliorer mon code, mais elles étaient soit trop complexes, soit ne correspondaient pas exactement à ce que je voulais: convertir les données du formulaire en objet JavaScript avec jQuery

Fonctionne mais peut être amélioré: ne fonctionne que sur des tableaux à une dimension et les index résultants peuvent ne pas être séquentiels. La propriété length d'un tableau renvoie le numéro d'index suivant comme longueur du tableau, et non comme longueur réelle.

J'espère que cela a aidé. Namaste!

var idsArr = [];

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

console.log(idsArr);

N'utilisez pas «chacun». Il est utilisé pour les opérations et les modifications dans le même élément. Utilisez "map" pour extraire les données du corps de l'élément et l'utiliser ailleurs.

ici autorise sa classe de cases à cocher sur les pages et var permet les rassemble dans un tableau et vous pouvez vérifier si la boucle est cochée pour, puis effectuer l'opération souhaitée individuellement. Ici, j'ai défini la validité personnalisée. Je pense que cela résoudra votre problème.

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

});