Utilisez JQuery pour sélectionner plusieurs valeurs de l'élément de liste clic de bouton

Question

J'ai une liste similaire à celle (avec une quantité arbitraire de Li):

<ul> 

<li> 
    <div class="box"> 
    <table> 
    <tr> 
    <td>Product 1</td> 
    <td><input type="hidden" class="hiddenid" value="5" /></td> 
    <td><input type="checkbox" value="yes" /></td> 
    </tr> 
    </table> 
    </div> 
</li> 


<li> 
    <div class="box"> 
    <table> 
    <tr> 
    <td>Product 2</td> 
    <td><input type="hidden" class="hiddenid" value="6" /></td> 
    <td><input type="checkbox" value="yes" /></td> 
    </tr> 
    </table> 
    </div> 
</li> 


</ul> 

<input type="submit" id="submit" /> 

et je dois utiliser JQuery à boucle à travers chaque élément et collecter la valeur #hiddenid pour chaque élément avec une case cochée, une fois que #submit est cliqué (finalement je vais passer cette chaîne à une page php et sur une base de données).

Ceci est ma tentative de JQuery, étant toutefois un débutant relatif (c.-à-Noob) Je suis très perdu ...

<script> 
$(document).ready(function() { 

    $(".arrow").click(function() { 

    var id = $.each("#stockyesno:checked").closest(".box").find(".hiddenid").val(); 

    alert(id); 

    }); 


}); 
</script> 

J'espère qu'il ya un moyen de corriger le déplacement de mon identifiant variable donc ce n'est pas plus compliqué ...

J'ai simplifié la question, mais je suis sûr que si cela peut être répondu, je peux mettre à l'échelle la réponse à mon code plus compliqué.

Merci pour l'aide à l'avance!

Answer 1

Vous êtes en train d'écrire

var ids = $(".stockyesno:checked").map(function() { 
    return $(this).closest(".box").find(".hiddenid").val(); 
}).get(); 
var idString = ids.join(','); 

Ce code utilise un appel jQuery normale pour obtenir les éléments vérifiés, puis appelle la map method pour convertir l'ensemble des cases à cocher dans un ensemble de chaînes de valeur.
Il appelle ensuite get pour convertir l'objet jQuery des chaînes en un tableau normal.
Enfin, il appelle la méthode Javascript join pour convertir le tableau en une seule chaîne séparée par des virgules.

Answer 2

Tenir compte de cette structure:

<ul> 
    <li> 
     Product 1 
     <input type="hidden" class="hiddenid" value="5" /> 
     <input type="checkbox" value="yes" /> 
    </li> 
    <li> 
     Product 2 
     <input type="hidden" class="hiddenid" value="6" /> 
     <input type="checkbox" value="yes" /> 
    </li> 
</ul> 

Answer 3

Si vous essayez de déterminer quelle case du produit a été sélectionné, il existe des moyens plus simples.

Par exemple, si vos champs de case à cocher ressemblait à ceci:

<input type="checkbox" name="product_id_1" id="product[1]" value="yes" /> 
<input type="checkbox" name="product_id_2" id="product[2]" value="yes" /> 
<input type="checkbox" name="product_id_3" id="product[3]" value="yes" /> 

Vous seriez alors en mesure d'utiliser les noms et leurs valeurs sur la soumission au serveur. Par exemple, si vous avez sélectionné les première et dernière cases à cocher, les paramètres d'URL sont les suivants: product_id_1 = yes et product_id_3 = yes.

encore plus simple:

<input type="checkbox" name="product_id" value="1" /> 
<input type="checkbox" name="product_id" value="2" /> 
<input type="checkbox" name="product_id" value="3" /> 

Lorsque toutes ces cases sont cochées, la valeur du paramètre d'URL product_id sera 1,2,3. Si seulement 2 et 3 étaient sélectionnés, la valeur serait de 2,3. Sélectionner simplement la première case donnerait une valeur de 1.

Il est bon de préciser que dans votre exemple de code, vous avez des ID en double sur les champs cachés. Cela pourrait être un oubli parce que vous essayiez de créer un exemple de code simple. Sinon, ce fait compliquera certainement votre problème. L'ID d'élément doit être unique.