Цикл по динамически генерируемым флажкам для получения значений

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». Таким образом, мои флажки будут иметь эти идентификаторы, но JS ищет '1,2,3' и, очевидно, получает ошибку, когда пытается получить значение элемента NULL.

Во-вторых, если он может получить значения, он получит все значения всех флажков, а не только те, которые проверены, и это то, что мне нужно. Хотя, если я получу способ циклически просмотреть идентификаторы, это не должно быть слишком сложно, но в состоянии if checked.

Буду очень признателен за любые предложения или помощь.

Answer 1

Вот более чистый способ сделать это. Вам не нужен cat_count; Добавьте класс к своим флажкам, выберите их все, получите их значение и добавьте его в переменную категории; Рабочая скрипка

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

Answer 2

Спасибо @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+',';
    }
}

Answer 3

Id должен быть уникальным, поэтому эта строка var cat_count = document.getElementById("cat_count").value; всегда будет возвращать один элемент.

Измените его, добавив index к нему

Вместо Id вы можете использовать name с

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