如何解决HTML中多个复选框仅提交单个选中值的问题

嘿，我一眼就看出问题出在哪了——你把<form>标签放进了forEach循环里！这就导致每一行食物条目都生成了一个独立的表单，每个表单里只有一个复选框。点击提交按钮时，只会提交当前行的那个小表单，自然只能拿到单个复选框的值。

问题根源拆解 #

• 循环内部重复创建<form>，每个表单仅包含当前行的复选框和输入框
• 提交按钮也跟着循环重复渲染，点击时只能触发当前行表单的提交

修复方案 #

把整个表单（包括提交按钮）移到循环外面，让所有复选框都属于同一个表单。这样点击提交按钮时，浏览器就会收集所有选中的复选框值，打包成数组提交到目标路由。

修改后的完整代码 #

<form method="POST" action="/topic7/mid-term/calculate">
  <table style="width:100%" class="styled-table">
    <tr>
      <th>Selected</th>
      <th>Amount</th>
      <th>Name</th>
      <th>Typical values</th>
      <th>Unit of typical values</th>
      <th>Calories</th>
      <th>Carbs</th>
      <th>Fat</th>
      <th>Protein</th>
      <th>Salt</th>
      <th>Sugar</th>
    </tr>
    <% availableFood.forEach(function(food_item){ %>
    <tr>
      <td><input type="checkbox" name="checkbox[]" value="<%= food_item.name %>"></td>
      <td><input id="qty" type="text" name="qty[]" value="1" width="8" style="width: 30px;"/></td>
      <td><%= food_item.name %></td>
      <td><%= food_item.typical_values %></td>
      <td><%= food_item.unit_of_the_typical_value %></td>
      <td><%= food_item.calories %></td>
      <td><%= food_item.carbs %></td>
      <td><%= food_item.fat %></td>
      <td><%= food_item.protein %></td>
      <td><%= food_item.salt %></td>
      <td><%= food_item.sugar %></td>
    </tr>
    <% }) %>
  </table>
  <input type="submit" value="Calculate sum" />
</form>

额外优化提醒 #

注意我把数量输入框的name改成了qty[]，这样后端能拿到和复选框对应的数量数组（比如选中第1和第3行，qty[]会拿到这两行的数量值），方便后续计算。如果不需要关联数量，可以忽略这个修改，但保持name用数组形式会更规范。

内容的提问来源于stack exchange，提问作者ahmadalibin