如何将多个值（价格）绑定到单个表单项？

Question

我正在制作一个食品订购表格，用户可以在其中选择多个食品，然后选择每个单独食品的数量。

我解决这个问题的方法是创建一个带有多个复选框的手风琴，并为每个复选框添加一个数量字段（当复选框被选中时显示）。到目前为止，我只能获取商品的名称和数量。下面是复选框代码现在的样子：

<!-- Option1 -->
<div class="form-row">
  <div class="form-group col-md-8">
    <div class="form-check">
      <input class="form-check-input showman" type="checkbox" name="items[1][chosen]" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
      <label class="form-check-label" for="c1">
        Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
      </label>
    </div>
  </div>
    <div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
      <!-- <label for="qtcounter">Quantity:</label> -->
      <div class="input-group" id="qtcounter">
        <input type="button" value="-" class="button-minus" data-field="items[1][quantity]">
        <input type="number" step="1" max="" value="1" name="items[1][quantity]" class="quantity-field">
        <input type="button" value="+" class="button-plus" data-field="items[1][quantity]">
      </div>
    </div>
</div>
<!-- Option 1 ends -->

如您所见，我使用关联数组来读取名称和数量。问题是，我还需要（动态）计算订单总额。这意味着为每个复选框附加一个数值（价格），但复选框值已设置为项目的名称。

有什么办法可以解决这个问题吗？我需要在提交按钮之前显示总数，在提交表单后出现的订单审查页面上，当然，我需要将此值与其他表单详细信息一起保存在数据库中。

Answer 1

您是否考虑过额外的隐藏输入字段，例如：

<input type="hidden" name="items[1][price]" value="10.00"/>

您可以遍历价格数组（或任何其他数组），检查是否为每个项目设置了相同的索引“选择”。

关于这一点，我通常会为每个项目添加另一个隐藏字段，它就像一个“识别”字段 - 它应该始终被设置（给我一个可靠的数组来迭代）；

<input type="hidden" name="items[index][id]" value="1"/>