Use JQuery to select multiple list item values on click of button

I have a list similar to this (with an arbitrary amount of li'开发者_如何学Pythons):

<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" />

and I need to use JQuery to loop through each item and collect the #hiddenid value for each item with a checked checkbox, once #submit is clicked (eventually I will pass this string to a php page and onto a database).

This is my attempt at the JQuery, however being a relative beginner (i.e. noob) I am very lost...

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

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

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

    alert(id);

  });


});
</script>

I am hoping there is a way to correct the traversing of my id variable so its not more complicated...

I have simplified the question, but I'm sure if this can be answered I can scale the answer to my more complicated code.

Thanks for the help in advance!

---

You're trying to write

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

This code uses a normal jQuery call to get the checked elements, then calls the map method to convert the set of checkboxes into a set of value strings.
It then calls get to convert the jQuery object of strings into a normal array.
Finally, it calls the Javascript join method to convert the array into a single comma-separated string.

---

Consider this 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>

---

If you're trying to determine which Product's checkbox has been selected, there are simpler ways.

For example, if your checkbox fields looked like this:

<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" />

You'd then be able to use the names and their values upon submitting to the server. For example, if you selected the first and last checkboxes, you'd have URL parameters product_id_1=yes and product_id_3=yes to work with.

Simpler still:

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

When all of these checkboxes are selected, the value of the product_id URL parameter will be 1,2,3. If only 2 and 3 were selected, the value would be 2,3. Selecting just the first checkbox would result in a value of 1.

It's worth pointing out that in your example code you have duplicate ID's on the hidden fields. This might be an oversight because you were trying to create simple sample code. If not, this fact will certainly complicate your problem. Element ID's must be unique.