Flask CRUD应用：如何实现多复选框筛选货运预约数据库记录？

要实现多材料复选框筛选，需要修改后端Flask逻辑和前端HTML的细节，具体如下：

1. 修改后端app.py的index函数 #

原来的request.args.get()只能获取单个参数值，改用getlist()获取所有选中的材料值；同时将filter_by()替换为支持多值匹配的filter()+in_操作符，还要处理未选择任何材料时返回全部记录的情况：

@app.route('/', methods=['GET', 'POST'])
def index():
    # 获取所有选中的材料，返回列表（无选中则为空列表）
    selected_materials = request.args.getlist('material_filter')
    
    if selected_materials:
        # 筛选包含选中材料的记录
        appts = appts_db.query.filter(appts_db.material.in_(selected_materials))\
            .order_by(appts_db.pickup_date).all()
    else:
        # 未选中任何材料时返回全部记录
        appts = appts_db.query.order_by(appts_db.pickup_date).all()
    
    return render_template('index.html', appts=appts)

2. 修正前端HTML的label关联问题 #

当前HTML中label的for属性与对应input的id不匹配，点击标签无法选中复选框，同时可以把提示文本改成贴合多选场景的表述：

<form action="/" method="GET">
    <label>Select materials:</label><br>
    <input type="checkbox" name="material_filter" id="HCl_filter" value="HCl">
    <label for="HCl_filter">HCl</label><br>
    <input type="checkbox" name="material_filter" id="Caustic_filter" value="Caustic">
    <label for="Caustic_filter">Caustic</label><br>
    <input type="checkbox" name="material_filter" id="Bleach_filter" value="Bleach">
    <label for="Bleach_filter">Bleach</label><br>
    <input type="submit" value="Filter Appointments">
</form>

<h3>Appointment List:</h3>
<table>
    <tr>
        <th>Carrier</th>
        <th>Material</th>
        <th>Pickup Date [YYYY-MM-DD]</th>
    </tr>
    {% for appt in appts %}
        <tr>
            <td>{{ appt.carrier }}</td>
            <td>{{ appt.material }}</td>
            <td>{{ appt.pickup_date }}</td>
        </tr>
    {% endfor %}
</table>

改动说明 #

• 后端：getlist()会获取所有同名的material_filter参数值并形成列表；in_()方法实现SQL的IN查询，匹配列表中的任意材料值；空列表时返回全部数据，避免筛选后无结果的突兀情况。
• 前端：修正label的for属性与input的id一致，提升用户交互体验；修改提示文本更符合多选逻辑。

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