Flask应用中基于Python变量设置Radio按钮默认选中值的实现问题

嘿，我明白你遇到的麻烦了——这其实是HTML单选按钮checked属性的特性在搞鬼！

问题出在哪？ #

HTML里的单选按钮checked是个布尔属性，意思是只要这个属性出现在标签里（哪怕你写的是checked=false），浏览器都会把它当成“选中”状态。你现在给三个单选框都加了checked属性，浏览器最后会默认选中最后一个有这个属性的选项，也就是第三个。

最简单的解决方案：模板里按需渲染checked #

不用搞复杂的字典，直接把电子表格里读出来的初始值传给模板，然后在每个单选框上判断是否匹配，只有匹配的才加上checked：

先改main.py，直接传递初始值：

@app.route('/', methods=['GET','POST'])
def params_form():
    # 这里替换成你从上传表格里获取到的实际值
    initial_value = 2  
    return render_template('home/sheet.html', initial_value=initial_value)

然后修改sheet.html：

<div>
    <input type="radio" id="n1" name="nyears" value=1 {% if initial_value == 1 %}checked{% endif %}>
    <label for="n1"> 1 </label>
    <input type="radio" id="n2" name="nyears" value=2 {% if initial_value == 2 %}checked{% endif %}>
    <label for="n2"> 2 </label>
    <input type="radio" id="n3" name="nyears" value=3 {% if initial_value == 3 %}checked{% endif %}>
    <label for="n3"> 3 </label>
</div>

另一种方式：后端处理状态（如果你偏好字典传值） #

要是你还是想用字典来管理状态，可以调整字典的内容，只给匹配的选项赋值'checked'，其他留空：

修改main.py：

@app.route('/', methods=['GET','POST'])
def params_form():
    initial_value = 2
    checked_states = {}
    for num in [1, 2, 3]:
        checked_states[str(num)] = 'checked' if num == initial_value else ''
    return render_template('home/sheet.html', checked_states=checked_states)

对应的sheet.html：

<div>
    <input type="radio" id="n1" name="nyears" value=1 {{ checked_states["1"] }}>
    <label for="n1"> 1 </label>
    <input type="radio" id="n2" name="nyears" value=2 {{ checked_states["2"] }}>
    <label for="n2"> 2 </label>
    <input type="radio" id="n3" name="nyears" value=3 {{ checked_states["3"] }}>
    <label for="n3"> 3 </label>
</div>

这样一来，只有和初始值匹配的单选框会带上checked属性，浏览器就能正确识别默认选中项啦！

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