Flask中如何根据标签值为空隐藏对应的单选按钮？

问题根源 #

你的JavaScript逻辑完全错误：你直接判断字符串"usb_device1"是否为空，而这个字符串本身永远不会是空值，导致所有隐藏逻辑都无法触发。此外，既然数据由后端传递，最优方案是在模板渲染阶段直接控制元素显示，无需前端额外处理。

方案一：模板层面直接控制（推荐） #

利用Jinja2模板的条件判断，直接决定是否渲染对应的单选按钮容器，高效且无需JS：

{% if usb_device1 %}
<div class="form-check form-check-inline" id="field1">
    <input class="form-check-input" type="radio" name="usb_device" value="option1" id="Check1" checked>    
    <label id="usb_device1" class="col-form-label col-md-4" for="Check1">{{usb_device1}}</label>     
</div>
{% endif %}

{% if usb_device2 %}
<div class="form-check form-check-inline" id="field2">
    <input class="form-check-input" type="radio" name="usb_device" value="option2" id="Check2">
    <label id="usb_device2" class="col-form-label col-md-4" for="Check2">{{usb_device2}}</label>           
</div>
{% endif %}

当usb_device1或usb_device2为空字符串时，对应的容器会直接不渲染，从根源解决显示问题。

方案二：修复JavaScript逻辑（不推荐，仅作参考） #

如果一定要用JS实现，需要获取标签的实际文本内容判断，且确保DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
    // 处理第一个单选按钮
    const usb1Text = document.getElementById('usb_device1').textContent.trim();
    document.getElementById('field1').style.display = usb1Text === '' ? 'none' : 'inline-block';

    // 处理第二个单选按钮
    const usb2Text = document.getElementById('usb_device2').textContent.trim();
    document.getElementById('field2').style.display = usb2Text === '' ? 'none' : 'inline-block';
});

额外优化：简化Python后端代码 #

原Python代码可以简化为更简洁的写法，减少重复判断：

@app.route('/transfer')
def transfer():
    hardDrive = transfer_files.find_harddrive()         
    hardDrive1 = hardDrive[0] if len(hardDrive) >= 1 else ''
    hardDrive2 = hardDrive[1] if len(hardDrive) >= 2 else ''
    return render_template("transfer.html", usb_device1=hardDrive1, usb_device2=hardDrive2)

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