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

【问题标题】：Can't get values for multiple checkboxes in html无法在html中获取多个复选框的值
【发布时间】：2021-04-06 16:18:54
【问题描述】：

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

<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>
<% }) %>

【问题讨论】：

标签： html node.js express checkbox

【解决方案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>

【讨论】：