本文讲解如何使用 jquery 在页面加载时根据预设数据自动选中单选按钮，并同步显示/隐藏对应的输入区域；同时绑定点击事件，实现用户交互时的实时显隐控制。

在表单开发中，常需根据用户选择（如“是/否”单选）动态控制后续字段的可见性。本例中，当“Queda Presenciada?”（是否目击跌倒）选中“Sim”（是）时，应立即显示 #quedpresss 区域（含“Outro”文本框）；若选“Não”（否），则保持隐藏。该逻辑需在初始化渲染和用户交互两个阶段均生效。

✅ 正确实现方式

关键在于：初始化时主动触发显隐逻辑 + 为 radio 添加事件监听器。以下为优化后的完整代码：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

$(document).ready(function() {
  var data = [
    { Queda: "Sim", Outro: "Teste1" }
  ];

  // 初始化：遍历数据并设置表单状态
  data.forEach(function(item) {
    var Queda = item.Queda;
    var Outro = item.Outro;

    if (Queda === 'Sim') {
      $('#quedpresa').prop('checked', true);
      $('#quedpresss').show(); // 立即显示关联区域
    } else if (Queda === 'Não') {
      $('#quedpresa1').prop('checked', true);
      $('#quedpresss').hide(); // 显式隐藏（增强健壮性）
    }

    // 设置文本框值（无论是否显示，都赋值）
    $('#quedpressa1').val(Outro);
  });

  // 绑定交互事件：点击 radio 时动态控制显隐
  $('#quedpresa').on('change', function() {
    $('#quedpresss').show();
  });

  $('#quedpresa1').on('change', function() {
    $('#quedpresss').hide();
  });
});

⚠️ 注意事项：使用 .on('change') 而非 .click() 更可靠（兼容键盘操作、移动端等）；初始化时对 #quedpresss 显式调用 .show() 或 .hide()，避免依赖初始内联样式 style="display:none" 的不确定性；data.forEach() 比传统 for 循环更语义清晰，且避免硬编码 data[0] 导致扩展性差；所有 DOM 操作应包裹在 $(document).ready() 中，确保元素已加载。

? HTML 结构补充建议（增强可维护性）

为提升可读性与可访问性，建议为 radio 组添加 fieldset 语义化包装，并确保 name 属性统一（当前已正确）：

<div class="col-xs-6 col-sm-3">
  <label class="form-label">Queda Presenciada?</label>
  <div class="form-check form-check-inline">
    <input type="radio" class="form-check-input inradio" name="quedpresa" id="quedpresa" value="Sim">
    <label class="form-check-label labradio" for="quedpresa">Sim</label>
  </div>
  <div class="form-check form-check-inline">
    <input type="radio" class="form-check-input inradio" name="quedpresa" id="quedpresa1" value="Não">
    <label class="form-check-label labradio" for="quedpresa1">Não</label>
  </div>
</div>

通过以上实现，表单既能响应初始数据自动呈现，又能支持用户实时切换，兼顾功能性、可访问性与代码健壮性。