使用WTForms与Jinja2时如何在单选按钮选中时渲染对应表单字段

核心原理：Jinja2 是服务端模板引擎，所有 {% if %} 这类逻辑都会在页面返回给浏览器之前执行完成，浏览器拿到的是静态HTML，所以单选按钮切换时服务端逻辑不会重新运行，必须搭配前端 JavaScript 实现动态切换字段的需求。

步骤1：修正模板原有逻辑，给字段加标识 #

你原有模板里的判断条件存在语法错误，ip 和 ifname 没有加引号，会被识别为未定义变量。我们先调整模板，把两个字段都渲染出来，用外层 div 包裹方便控制显隐，同时保证页面首次加载时显示和默认选中值匹配的字段：

{{ render_field(form.radio_choice) }}

<div id="weight-wrapper" style="display: {% if form.radio_choice.data == 'ip' %}block{% else %}none{% endif %};">
  {{ render_field(form.weight) }}
</div>

<div id="domain-wrapper" style="display: {% if form.radio_choice.data == 'ifname' %}block{% else %}none{% endif %};">
  {{ render_field(form.domain) }}
</div>

步骤2：添加 JavaScript 监听单选切换事件 #

在页面底部添加以下原生 JS 代码，监听单选按钮的选中状态变化，动态切换两个字段的显隐：

<script>
// 获取所有name为radio_choice的单选框
const radioOptions = document.querySelectorAll('input[name="radio_choice"]');

radioOptions.forEach(option => {
  option.addEventListener('change', function() {
    const selectedValue = this.value;
    const weightWrapper = document.getElementById('weight-wrapper');
    const domainWrapper = document.getElementById('domain-wrapper');

    if (selectedValue === 'ip') {
      weightWrapper.style.display = 'block';
      domainWrapper.style.display = 'none';
    } else if (selectedValue === 'ifname') {
      weightWrapper.style.display = 'none';
      domainWrapper.style.display = 'block';
    }
  })
})
</script>

可选方案：AJAX 动态拉取字段（仅适用于字段内容需要动态生成的场景） #

如果你的 weight 或 domain 字段的选项/内容需要根据选中的单选值从后端动态获取，可以用AJAX实现：

• 新增一个后端接口，接收单选值参数，返回对应字段的渲染后的HTML
• 在单选切换的事件回调里，发送AJAX请求把选中值传给后端，拿到返回的字段HTML后替换到页面对应位置即可

内容的提问来源于stack exchange，提问作者Lâm Huynh Van