无法获取 html 中多个复选框的值

Question

我的 sql table 中有一个 html table 的所有项目。每个项目都有一个复选框，选中该复选框后，应该会在我按下提交按钮时将项目名称的值提供给计算路径。但是，即使选中了多个复选框，提交按钮也只会提交一个复选框值。我如何让它提交所有选中的复选框的值，而不仅仅是一个复选框。

<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>

        <tr>
        <% availableFood.forEach(function(food_item){ %>
                <form method="POST" action="/topic7/mid-term/calculate"> 
                        <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>
                        <input type="submit" value="Calculate sum" />
        </form>
<% }) %>

Answer 1

问题在于您的 forEach 循环内容，因为它会在每次迭代时创建和关闭您的表单标签，从而使多个表单只有一个复选框。要确认在浏览器中检查您的源代码，请按 Ctrl+U

尝试将您的表单标签放在 forEach 循环之外，并将 tr 标签放在 forEach 循环中，就像这样

<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>

    <form method="POST" action="/topic7/mid-term/calculate"> 
    <% 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>
    <% }) %>
                        <input type="submit" value="Calculate sum" />
        </form>
</table>

无法获取 html 中多个复选框的值

Can't get values for multiple checkboxes in html

html

checkbox

node.js

express