17370845950

本文介绍如何使用 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



  
    Qu
eda Presenciada?
    
    Sim
    
    Não
  

  
    Outro
    
  

✅ 关键优化点总结：

• 使用 $(document).ready() 确保 DOM 加载完成；
• .off().on() 防止事件重复绑定；
• === 严格比较避免类型转换隐患；
• 支持多数据项扩展（data[i]）；
• 初始隐藏通过内联样式实现，兼容性高。

通过以上方式，即可实现“有值则显、无值则隐”的智能表单交互逻辑。