本文介绍如何使用 jquery 在页面初始化时根据数据状态自动显示/隐藏指定 div，并通过监听单选按钮点击事件实现交互式切换，确保“其他”输入框仅在选择“是”时可见。
在表单开发中，常需根据用户选择动态控制某些字段的可见性。例如：当用户选择“Queda Presenciada?（是否目击跌倒）”为“Sim（是）”时，才显示“Outro（其他）”文本输入框；若选“Não（否）”，则隐藏该区域。这不仅能提升用户体验，还能避免无效数据提交。
实现该功能需两步：初始化渲染 + 交互响应。
✅ 初始化时根据数据自动显示/隐藏
在遍历数据并设置单选按钮状态后，立即判断 Queda 值：若为 "Sim"，调用 .show() 显示目标容器（#quedpresss）；否则保持默认隐藏（style="display: none"）。注意：无需对 "Não" 显式调用 .hide()，因其初始即为隐藏状态。
✅ 绑定点击事件实现动态切换
为两个单选按钮分别添加点击监听器：
- 点击 #quedpresa（“Sim”）→ 显示 #quedpresss
- 点击 #quedpresa1（“Não”）→ 隐藏 #quedpresss
⚠️ 注意事项：
- 事件绑定应放在 DOM 就绪之后（推荐包裹在 $(document).ready() 中），避免因元素未加载导致绑定失败；
- 使用 .prop('checked', true) 设置选中状态更可靠（而非 .attr()）；
- 若存在多个数据项（data.length > 1），原代码中 data[0] 的硬编码需改为 data[i] 以支持循环处理；
- 推荐使用语义化、可维护的选择器，如为 radio 组添加统一 name 并结合 :checked 查询。
以下是优化后的完整示例代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var data = [
{ Queda: "Sim", Outro: "Teste1" }
];
for (var i = 0; i < data.length; i++) {
var Queda = data[i].Queda;
var Outro = data[i].Outro;
if (Queda === 'Sim') {
$('#quedpresa').prop('checked', true);
$('#quedpresss').show();
} else if (Queda === 'Não') {
$('#quedpresa1').prop('checked', true);
// 保持隐藏，无需额外操作
}
// 绑定交互事件（建议移出循环，避免重复绑定）
$('#quedpresa').off('click').on('click', function() {
$('#quedpresss').show();
});
$('#quedpresa1').off('click').on('click', function() {
$('#quedpresss').hide();
});
$('#quedpressa1').val(Outro);
}
});
</script>
<a href="#" class="dropdown-item btn btn-warning upd_qued">
<i class="metismenu-icon pe-7s-note"></i> Alterar
</a>
<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>✅ 关键优化点总结：
- 使用 $(document).ready() 确保 DOM 加载完成；
- .off().on() 防止事件重复绑定；
- === 严格比较避免类型转换隐患；
- 支持多数据项扩展（data[i]）；
- 初始隐藏通过内联样式实现，兼容性高。
通过以上方式，即可实现“有值则显、无值则隐”的智能表单交互逻辑。
