Javascript 通过动态生成的复选框循环以获取值

我在我的网站上有一个产品类别列表，我正在尝试允许产品在多个类别下列出

创建产品时，会有一个类别列表，其中包含由PHP生成的复选框，如下所示：

我对此有两个问题：

首先，可以删除一个类别，因此尽管可能有3个类别，但这些类别可能具有ID，如“1,3,5”。因此，我的复选框将有这些ID，但是JS正在查找“1,2,3”，当它试图获取NULL元素的值时，显然会出错

其次，如果它能得到值，它将得到所有复选框的所有值，而不仅仅是我需要的那些被选中的值。虽然如果我能找到一种正确循环ID的方法，但这应该不会太困难，而是在if-checked条件下

---

如果您对此有任何建议或帮助，我们将不胜感激。

Id必须是唯一的，因此此行var cat\u count=document.getElementByIdcat\u count.value；将始终返回单个元素

通过向其添加索引来更改它

您可以使用名称来代替Id

---

这里有一个更干净的方法。你不需要猫计数；向复选框中添加一个类，选择所有类，获取它们的值并将其附加到categories变量中；工作

---

感谢@CBroe首先到达那里，这对我很有用

var categories = '';
var category = document.getElementsByClassName("product_category");
var i;
for(i=0; i<category.length; i++){
    if(category[i].checked == true){
        var category_value = category[i].value;
        categories += category_value+',';
    }
}

---

不要像新手经常做的那样将ID作为选择元素的“方法”，而是使用公共类。选择该类中的所有元素，那么您就不需要存储您首先获得的元素数量信息，只需使用getElementsByClassName返回的节点列表的length属性即可。@CBroe谢谢您的评论，我将尝试此操作。

<input type="hidden" name="cat_count" id="cat_count" value="<?php echo $categoryCount; ?>">

var categories;
var cat_count = document.getElementById("cat_count").value;
var i;
for(i=1; i<=cat_count; i++){
    var cat_id = 'cat_'+i;
    var cat = document.getElementById(''+cat_id+'').value;
    categories += cat+',';
}

document.getElementsByName("'cat_$id'")

var categories = "";
var checkboxes = Array.from(document.getElementsByClassName("checkbox"));
checkboxes.forEach(function(element, index) {
    categories += element.value;
});

var categories = '';
var category = document.getElementsByClassName("product_category");
var i;
for(i=0; i<category.length; i++){
    if(category[i].checked == true){
        var category_value = category[i].value;
        categories += category_value+',';
    }
}