本文介绍如何使用 jquery 在页面初始化时依据数据自动选中单选按钮，并在“是”被选中时立即显示对应的输入框区域，同时支持用户后续手动切换时实时响应显隐状态。
在表单交互开发中，常需根据用户选择（如“是/否”单选）动态控制相关字段的可见性。本例中，当 Queda 字段值为 "Sim"（是）时，不仅应默认选中“Sim”单选按钮，还需立即显示其关联的 #quedpresss 容器（内含“Outro”文本框）；若为 "Não"（否），则保持该容器隐藏。
实现分为两个关键阶段：初始化渲染与用户交互响应。
✅ 初始化逻辑（加载即生效）
遍历数据后，判断 Queda 值：
- 若为 "Sim"，选中 #quedpresa 并调用 .show() 显式显示 #quedpresss；
- 若为 "Não"，仅选中 #quedpresa1，不触发显示（因其默认 style="display: none" 已满足需求）。
var data = [{ Queda: "Sim", Outro: "Teste1" }];
data.forEach(function(item) {
// 设置单选状态
if (item.Queda === "Sim") {
$('#quedpresa').prop('checked', true);
$('#quedpresss').show(); // 立即显示关联区域
} else if (item.Queda === "Não") {
$('#quedpresa1').prop('checked', true);
}
// 填充输入值（无论是否显示）
$('#quedpressa1').val(item.Outro || '');
});✅ 交互响应（用户点击时同步更新）
为两个单选按钮绑定 click 事件，确保用户手动切换时 UI 实时同步：
$('#quedpresa').on('click', function() {
$('#quedpresss').show();
});
$('#quedpresa1').on('click', function() {
$('#quedpresss').hide();
});⚠️ 注意事项：避免重复绑定：事件监听器应放在初始化逻辑之外，且最好只执行一次（例如置于 $(document).ready() 中），防止多次调用导致重复绑定；forEach 替代 for 循环：更语义化，且避免硬编码 data[0]（原代码中 i✅ 完整可运行示例（精简整合版）
通过以上结构化处理，既保证了初始数据驱动的精准渲染，又提供了流畅的用户交互体验，是表单条件显示场景下的标准实践方案。
