如何根据单选按钮选中状态动态显示或隐藏关联表单项

霞舞 2026-01-25 00:00:00 次阅读

本文介绍如何使用 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
✅ 完整可运行示例（精简整合版）
  
    Queda Presenciada?
    
    Sim
    
    Não
  
  
    Outro
    
  
通过以上结构化处理，既保证了初始数据驱动的精准渲染，又提供了流畅的用户交互体验，是表单条件显示场景下的标准实践方案。