本文介绍如何使用 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 查询。
以下是优化后的完整示例代码：
Alterar
✅ 关键优化点总结：
- 使用 $(document).ready() 确保 DOM 加载完成；
- .off().on() 防止事件重复绑定；
- === 严格比较避免类型转换隐患；
- 支持多数据项扩展（data[i]）；
- 初始隐藏通过内联样式实现，兼容性高。
通过以上方式，即可实现“有值则显、无值则隐”的智能表单交互逻辑。
