javascript - 循环遍历动态生成的复选框以获取值

Question

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

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

$sql = "SELECT * FROM categories";
$stmt = DB::run($sql);
$categoryCount = $stmt->rowCount();
if ($categoryCount > 0) {
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $id = $row["id"];
        $category_name = $row["category"];
        $category_checkboxes .= "<input type='checkbox' value='$id' name='cat_$id' id='cat_$id'> $category_name<br />";
    }
}

我创建了一个隐藏输入来确定可用类别的数量

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

然后，我尝试在 JS 中循环遍历这些内容，以获取选择哪些内容通过 AJAX 发送到我的解析脚本以添加到数据库中。

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+',';
}

我对此有两个问题:

首先可以删除一个类别，因此尽管可能有 3 个类别，但这些类别可能具有“1,3,5”等 ID。因此，我的复选框将具有这些 ID，但 JS 正在寻找“1,2,3”，并且当它尝试获取 NULL 的值时，它显然会收到错误> 元素。

其次，如果它可以获取值，它将获取所有复选框的所有值，而不仅仅是我需要的已检查的值。虽然如果我有办法正确循环 ID，这应该不会太困难，但在 if check 条件下。

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

Answer 1

这是一种更简洁的方法。你不需要 cat_count;将一个类添加到您的复选框中，选择所有它们，获取它们的值并将其附加到类别变量中；工作fiddle

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