web-dev-qa-db-fra.com

jQuery récupère les valeurs des cases à cocher cochées dans un 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 jusqu'à présent:

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

Cependant, cela génère plus que ce dont j'ai besoin. Non seulement j'obtiens les valeurs, mais certaines autres choses que je ne veux pas.

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

Je voudrais juste les identifiants (3 premiers articles dans ce cas).

En utilisant $.each et en transmettant des valeurs à un tableau, j'obtiens le résultat souhaité:

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

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

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

Merci

javascriptjquery
111
if __name__ is None

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

Pour 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.

228
Andrew Whitaker

DEMO: 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();
20
Cristi Pufu

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

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

17
tymeJV

Je refactored votre code un peu et crois que je suis venu avec la solution que vous cherchiez. Fondamentalement, au lieu de définir searchIDs comme étant le résultat de .map(), je viens de placer 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.

10
Mark Meyer
     var ids = [];

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

Celui-ci a fonctionné pour moi!

5
Thalinda Bandara
var idsArr = [];

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

console.log(idsArr);
1
qammar feroz

Les éléments de formulaire nommés dans le code HTML sous forme de tableau devaient être un tableau dans l'objet javascript, comme si le formulaire avait été 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 trop complexes ou ne voulaient pas exactement ce que je voulais: Convertir les données de formulaire en objet JavaScript avec jQuery

Fonctionne mais peut être améliorée: 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 sous forme de longueur, et non de longueur.

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

1
i_a

Ne pas utiliser "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 les utiliser ailleurs.

0
MItrajyoti Kusari

voici ce que permet la classe de cases à cocher sur les pages et var permet de les collecter dans un tableau. Vous pouvez alors vérifier si la boucle est vérifiée et exécuter 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("");
        }
   }

});
0
Manish