如何获取选定复选框的总和并将选定项目保存在数据库 mysql 中

Question

我正在尝试为包含菜单（食物名称和价格）的餐厅中的菜单创建网页。我想要的是在用户通过单击复选框选择菜单时在前端，他得到网页上的总价格。此外，为了能够提取他选择的菜单的名称，并使用 python flask 将它们保存在 MySQL 数据库中。

我所做的是从数据库中创建两个列表，一个是食物名称，另一个是价格，但我得到的是这个。

def ef menu1():
    cur = mysql.connection.cursor()
    cur.execute('''SELECT name FROM menu ''')
    name = cur.fetchall()
    cur.execute('''SELECT price FROM menu ''')
    price = cur.fetchall()
    cur.execute('''SELECT MAX(num) FROM menu''')
    maxi=cur.fetchone()
    maxid = int(maxi[0])

    return render_template('test4.html',name = name,price=price , maxid=maxid)

<div class= "row" style="background-image: url('{{url_for('static',filename='images/bg-01.jpg')}}');"><!-- -->     
    <div class= "col-lg-6">
        <br>
        <p>
            <strong>Food</strong> 
            <br />
            {% for n in range(maxid) %}
            <br />
            <input class="my-activity" type="checkbox" name="activity['food']['breakfast']" value="{{price[n]}}"> The Menu {{name[n]}} is {{price[n]}} Tshs
            <br/> 
            {% endfor %}
        </p> 
        <p>
            <strong>Amount (US$)</strong>: 
            <input type="text" name="amount" id="amount" />
        </p>
    </div>
</div>

<script src="{{url_for('static',filename='js/jquery-3.4.1.js')}}" ></script>
    <script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function() {        
            $(".my-activity").click(function(event) {
                var total = 0;
                $(".my-activity:checked").each(function() {
                    total += parseInt($(this).val());
                });
                if (total == 0) {
                    $('#amount').val('');
                } else {                
                    $('#amount').val(total);
                }
            });
        });    
    </script>

Answer 1

HTML 和 jQuery 非常完美，但您正在为复选框呈现无效值。

所以我简化了你的 Python 代码。

def ef_menu1():
    cur = mysql.connection.cursor()
    cur.execute('SELECT name,price FROM menu')
    name = cur.fetchall()
    cur.close()    
    return render_template('test4.html', name=name)

将您的烧瓶模板部分更新为以下代码

{% for n in name %}
<br />
<input class="my-activity" type="checkbox" name="activity['food']['breakfast']" value="{{n[1]}}"> The Menu {{n[0]}} is {{n[1]}} Tshs
<br/> 
{% endfor %}