Php 使用jquery创建多个选择的表格表单

我有一个输出数据的循环：

 foreach ($userItems_get as $item => $value) {

            if ($value['prefab'] == 'wearable') {

            echo $value['name'] . "</br>";

            echo "<img src=\"{$value['image_inventory']}.png\" width=\"90\" height=\"60\">" . "</br>";

            if (!isset($value['item_rarity'])) {
                $rarity = "common";
            } else {
                $rarity = $value['item_rarity'];
            }

            echo $rarity . "</br>";

            foreach ($userItemsLoad as $key => $values) {

                if ($item == $values['defindex']) {

                    echo $values['id'] . "</br></br>";
                    break;
                }

            }

            }


        }

foreach（$userItems\u获取为$item=>$value）{
如果（$value['prefable']=='wearable'）{
echo$value['name']。“
”；
回声“，”
”；
如果（！isset（$value['item\u rarity']））{
$rarity=“common”；
}否则{
$rarity=$value['item_rarity']；
}
echo$稀有品。“
”；
foreach（$userItemsLoad作为$key=>$value）{
如果（$item==$values['defindex']）{
回显$value['id']。“

”；
打破
}
}
}
}

我希望它显示如下：

对此，我有以下html：

<div class="item-container">
    <div id="item-box">
              <img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt="">

              <div id="rarity">
                    rare
              </div>
          </div>

稀有的

无论用户选择哪一项，我都希望获得它的值['id']，用户可能一次选择多个项

我可以创建一个普通的检查点类型的输入表，但是用户可能有1000个项目，所以需要像图中那样进行设置

有没有一个简单的方法来实现这一点？谢谢

<div class="item-container">
    <div class="item-box" data-id="1234">
        <img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt="">
        <div id="rarity">
            rare
        </div>
    </div>
</div>


<script>
    var selectedItems = [];

    $('.item-box').on('click', function(e){
        $(this).toggleClass('selected');
        var selectedItems = []
        $('.item-box.selected').each(function(i,o){
            selectedItems.push($(this).data('id'))
        })
    });
</script>

稀有的
var selectedItems=[]；
$（'item box'）。在（'click'，函数（e）上{
$（this.toggleClass（'selected'）；
var selectedItems=[]
$（'.item box.selected'）。每个（函数（i，o）{
选择editems.push（$（this.data（'id'））
})
});

---

我个人认为我会考虑使用AngularJS（）实现类似的功能，这将使您的生活更加轻松

我有点困惑，这怎么办。。还有什么是数据id？这里面的表单类型，输入类型是什么？你能实现这个循环吗？这会节省我很多时间。我怎样才能生成这样的表呢？数据id是您为每个项目提供的值['id']。它所做的是应用/删除选定的类（然后可以对其进行可视化表示）。它不是表单中的任何内容，但是当您发布表单时，您可以使用变量selectedItems，它是所选ID的数组。因此，我累了，这是我现在的代码：这是输出：我无法选择任何项目，没有提交数据的按钮，我也看不到我的选择。您需要将ID=“item box”更改为class=“项目框”。请参阅此小提琴-。然后，您需要在提交表单时将其添加到提交的数据中（如果您正在执行此操作）真的很抱歉再次询问，但我想我遗漏了一些东西，当我单击它时，它仍然不会选择，这是我现在的代码：。我想问题可能是item box在我的css中已经是一个已定义的类，它修改了框的外观，如下所示：我看不到任何已选择的内容。如何修复此问题？