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个类别，但这些类别可能具有ID＆＃39; 1,3,5＆＃39;。因此，我的复选框将包含这些ID，但JS正在寻找＆＃39; 1,2,3＆＃39;当它试图获得NULL元素的值时，它显然会出错。

其次，如果它可以获取值，它将获得所有复选框的所有值，而不仅仅是那些被检查的值，这是我需要的。虽然如果我能够正确地循环使用ID，但在if checked条件下这不应该太难。

对此有任何建议或帮助将不胜感激。

Answer 1

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

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

Answer 2

ID必须是唯一的，因此此行var cat_count = document.getElementById("cat_count").value;将始终返回单个元素。

通过向其添加index来更改

您可以将name与

一起使用，而非ID

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

Answer 3

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

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

3 个答案: