如何根据单选按钮选择动态显示或隐藏指定 div 元素-html教程-PHP中文网

如何根据单选按钮选择动态显示或隐藏指定 div 元素

本文介绍使用 jquery 实现“仅在特定 radio 被选中时显示对应 div，其余无关 div 保持原状”的精准控制方案，解决常见误用 id 拼接与范围隐藏导致的逻辑错误。

本文介绍使用 jquery 实现“仅在特定 radio 被选中时显示对应 div，其余无关 div 保持原状”的精准控制方案，解决常见误用 id 拼接与范围隐藏导致的逻辑错误。

在表单交互开发中，常需根据用户对单选按钮（radio）的选择，动态控制某些区域（如

）的显隐状态。本例要求：默认隐藏 #custom_2、#custom_3、#custom_4；当选择 “Radio 1” 时仅显示 #custom_2，选择 “Radio 2” 时仅显示 #custom_3，选择 “Radio 3” 时仅显示 #custom_4；而同级的 #custom_5、#custom_6 等其他元素完全不受影响——这是关键约束，不可全局隐藏再筛选显示。

原始代码存在两个核心问题：

ID 拼接逻辑错误：$("#custom_3" + test).show() 将 test="1" 生成 #custom_31，而非预期的 #custom_2；
隐藏范围失控：$("#custom_2").hide() 仅隐藏一个 div，未统一管理目标组，且未重置其他已显示项，导致状态残留。

✅ 正确做法是：为需受控的 div 统一分配专属类名（如 class="target-section"），通过类批量隐藏，再按 radio 值精准显示唯一匹配 ID 的元素。这样既保证作用域隔离（不影响 custom_5/custom_6），又避免硬编码 ID 逻辑。

以下是完整可运行示例（兼容 CiviCRM 环境中的 CRM.$ 封装）：

<div class="ShowHide">
  Radio 1 <input type="radio" name="custom_1" value="2" id="CIVICRM_QFID_1">
  Radio 2 <input type="radio" name="custom_1" value="3" id="CIVICRM_QFID_2">
  Radio 3 <input type="radio" name="custom_1" value="4" id="CIVICRM_QFID_3"><div id="custom_2" class="crm-section custom_2-section form-item target-section">Radio 1 Selected</div>
  <div id="custom_3" class="crm-section custom_3-section form-item target-section">Radio 2 Selected</div>
  <div id="custom_4" class="crm-section custom_4-section form-item target-section">Radio 3 Selected</div>
  <div id="custom_5" class="crm-section custom_5-section form-item">This stays visible/unaffected</div>
  <div id="custom_6" class="crm-section custom_6-section form-item">Also unaffected</div>
</div>

CRM.$(function($) {
  // 初始隐藏所有受控 div（仅 target-section 类）
  $('.target-section').hide();

  // 监听 radio 变化（推荐用 change 而非 click，兼容键盘操作）
  $("input[name='custom_1']").on('change', function() {
    const selectedValue = $(this).val();
    // 先隐藏全部目标 div
    $('.target-section').hide();
    // 再显示对应 ID 的 div（注意：value 值需与目标 ID 后缀一致）
    $('#custom_' + selectedValue).show();
  });
});

⚠️ 关键注意事项：

value 值必须与目标 div ID 后缀严格匹配（如 Radio 1 的 value="2" 对应 #custom_2），建议在 HTML 中直接校准；
使用 .on('change') 替代 .click() 更健壮，支持 Tab 键切换后回车触发；
CRM.$ 是 CiviCRM 的 jQuery 封装，确保此上下文可用，无需额外引入 jQuery；
严禁使用 $("#custom_" + test) 动态拼接未验证的 ID —— 若 radio value 非数字或含特殊字符，将导致选择器失效。

通过类名界定作用域 + ID 精准定位，该方案实现了清晰、可维护、零副作用的显示逻辑，完美满足多组独立控件共存的复杂表单需求。