Javascript 使用JQuery在单击按钮时选择多个列表项值

我有一个类似的列表（任意数量的李）：

产品1


产品2

我需要使用JQuery循环遍历每个项目，并使用复选框收集每个项目的#hiddenid值，一旦单击#submit（最终我将把这个字符串传递到php页面和数据库）

这是我对JQuery的尝试，但是作为一个相对的初学者（即noob），我非常迷茫

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

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

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

    alert(id);

  });


});
</script>

$（文档）.ready（函数（）{
$（“.arrow”）。单击（函数（）{
var id=$.each（“#stockyesno:checked”）.closest（“.box”）.find（“.hiddenid”）.val（）；
警报（id）；
});
});

我希望有一种方法来纠正我的id变量的遍历，这样它就不会更复杂

我已经简化了这个问题，但我确信如果这个问题能够得到回答，我可以将答案扩展到更复杂的代码中

提前谢谢你的帮助

你想写什么

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

此代码使用普通的jQuery调用获取选中的元素，然后调用将复选框集转换为一组值字符串。
然后调用将字符串的jQuery对象转换为普通数组。

---

最后，它调用Javascript

join

方法将数组转换为单个逗号分隔的字符串。

考虑以下结构：

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

产品1


产品2

如果您试图确定选中了哪个产品的复选框，有更简单的方法

例如，如果您的复选框字段如下所示：

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

然后，您可以在提交到服务器时使用这些名称及其值。例如，如果选中了第一个和最后一个复选框，则可以使用URL参数product_id_1=yes和product_id_3=yes

更简单的是：

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

选中所有这些复选框后，product_id URL参数的值将为1,2,3。如果仅选择2和3，则该值将为2,3。仅选择第一个复选框将导致值为1

---

值得指出的是，在示例代码中，隐藏字段上有重复的ID。这可能是一个疏忽，因为您试图创建简单的示例代码。如果没有，这个事实肯定会使你的问题复杂化。元素ID必须是唯一的。

表，在DIV中，在LI中？为什么？@Matt Ball这是翻译中的一个错误，我向你保证：）@SLaks谢谢，我已经做了更正。这是使用ID选择器来获取一组要循环的元素：）（与

#hiddenid

相同，应该是

.hiddenid

）@Nick：当我写答案时，那些是ID，不是类。修正了，太棒了！非常感谢。答案很有效，解释得也很好。感谢Sime的提示，我正在开发一些稍后需要表结构的东西，我应该更清楚。注意到您将ID属性编辑为类-因此我最后的评论与您的问题不再相关，但是我认为值得保留。谢谢Michael，我没有想到给每个复选框分配一个唯一的id，这是可能的，因为每个li都有一个id，但是按下submit后用JQuery选择的问题仍然不存在吗？URL参数是什么？据我所知，您使用jQuery帮助收集值，然后将这些值用作提交的一部分。如果您的唯一目标是提交选定的复选框及其产品id，那么我的建议应该可以做到这一点，而不必使用jQuery。如果您仍然希望在我的示例中使用jQuery来获取选定的复选框，则可以使用$（“input:checked”）来获取选中的元素。

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