本文介绍如何使用 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 < data.length 却始终取 data[0]，存在逻辑冗余）；空值防御：对 Outro 赋值时使用 item.Outro || '' 防止 undefined 导致输入框显示 "undefined"；ID 命名一致性：检查 HTML 中 id="quedpresss"（容器）与 JS 中 #quedpresss 是否完全一致（原文本中容器 ID 为 quedpresss，但部分代码误写为 quedpressa1，需确保匹配）。
✅ 完整可运行示例（精简整合版）
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="row g-3 insquedaa2">
<div class="col-xs-6 col-sm-3">
<label class="form-label">Queda Presenciada?</label>
<input type="radio" class="inradio" name="quedpresa" id="quedpresa" value="Sim">
<label for="quedpresa" class="labradio">Sim</label>
<input type="radio" class="inradio" name="quedpresa" id="quedpresa1" value="Não">
<label for="quedpresa1" class="labradio" style="margin-left: 2%;">Não</label>
</div>
<div class="col-xs-6 col-sm-3" id="quedpresss" style="display: none;">
<label for="quedpressa1" class="form-label">Outro</label>
<input type="text" class="form-control" id="quedpressa1" name="quedpressa1">
</div>
</form>
<script>
$(document).ready(function() {
const data = [{ Queda: "Sim", Outro: "Teste1" }];
// 初始化：设置选中状态与显隐
data.forEach(item => {
if (item.Queda === "Sim") {
$('#quedpresa').prop('checked', true);
$('#quedpresss').show();
} else if (item.Queda === "Não") {
$('#quedpresa1').prop('checked', true);
$('#quedpresss').hide();
}
$('#quedpressa1').val(item.Outro || '');
});
// 交互：点击时动态控制显隐
$('#quedpresa').on('click', () => $('#quedpresss').show());
$('#quedpresa1').on('click', () => $('#quedpresss').hide());
});
</script>通过以上结构化处理，既保证了初始数据驱动的精准渲染，又提供了流畅的用户交互体验，是表单条件显示场景下的标准实践方案。
