本文讲解如何使用 jquery 在页面加载时根据预设数据自动选中单选按钮，并同步显示/隐藏对应的输入区域；同时绑定点击事件，实现用户交互时的实时显隐控制。
在表单开发中，常需根据用户选择（如“是/否”单选）动态控制后续字段的可见性。本例中，当“Queda Presenciada?”（是否目击跌倒）选中“Sim”（是）时，应立即显示 #quedpresss 区域（含“Outro”文本框）；若选“Não”（否），则保持隐藏。该逻辑需在初始化渲染和用户交互两个阶段均生效。
✅ 正确实现方式
关键在于：初始化时主动触发显隐逻辑 + 为 radio 添加事件监听器。以下为优化后的完整代码：
$(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 属性统一（当前已正确）：
通过以上实现，表单既能响应初始数据自动呈现，又能支持用户实时切换，兼顾功能性、可访问性与代码健壮性。
