javascript - 如何将相同的类/id 名称 php 值从单选按钮传递到 javascript？

Question

这是我的问题。我正在从包含项目名称和 ID 的数据库中循环项目。我对每个项目都有一个单选按钮。该项目的 id 存储在单选按钮 value 中......现在我想要实现的是，当我单击提交按钮时，它将调用一个函数在 JavaScript 中调用 save() 并仅保存所有选定的项目......我已经尝试了几个小时，但无法使其工作。

这是我的代码......

当我从数据库循环时，它将显示单选按钮和项目名称...

<?php
    $retrieveQuery = "SELECT * FROM `itemdb` WHERE `approve`= 1 AND `userId` = '$userId';";
    $retrieveresult = mysqli_query($dbconnect, $retrieveQuery);
    if(mysqli_num_rows($retrieveresult) > 0)
    {                                                   
        while($retrieverow = mysqli_fetch_assoc($retrieveresult))
        {
?>
            <p>&nbsp;</p>                                                       
            <div style="background-color: rgba(0, 0, 0, 0.16);">                                                                
                <input style="margin-bottom: -19px;" type="checkbox" class="item" name="item[]" value=<?php echo $retrieverow['itemID'] ?>>
                <p style="margin-left: 26px;"><?php echo $retrieverow['itemName'] ?></p>
                <p style="margin-top:-10px;margin-left:28px"><i><?php echo $retrieverow['category'] ?></i></p>
            </div>                                                                                                          
<?php
        }                                                   
    }
    else
    {
        echo "Test : There is no approve Items to be displayed";
        echo "Either wait for the admin to approve or upload items to start Trading ! ";
    }
?>

这是我的脚本:(我如何保存我的项目？)

function save()
{
    var f = document.getElementsByClassName('item').value; //my own items chosen frm invntry
    xmlhttp.onreadystatechange = function(){
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            document.getElementById("confirmTrade").innerHTML = xmlhttp.responseText;
                        }
                        };
                        xmlhttp.open("POST","trade.php?f="+f,true);
                        xmlhttp.send();
}

在我单击 save() 函数后，它会使用 ajax 方法将数据发送到另一个页面......

PS:一切正常...其他变量已成功传递但只有一个项目变量正在传递....

提前致谢!

Answer 1

无需过多研究，请看一下这一行:

var f = document.getElementsByClassName('item').value;

document.getElementsByClassName 获取 HTMLCollection元素，因此调用此值没有多大意义。您需要循环遍历它们并找到选定的。我让它构建一个数组，然后将其加入到逗号分隔的列表中:

var checkboxes = document.getElementsByClassName('item');
var f = [];

for(var i = 0; i < checkboxes.length; i++){
   if(checkboxes[i].checked == true)
       f.push(checkboxes[i].value);
}

f = f.join();//makes comma seperated list

//proceed with ajax call