基于单选框选择显示/隐藏指定Div的问题求助

需求 #

• 默认状态下，id为custom_2、custom_3、custom_4的Div需隐藏
• 选择「Radio 1」时显示custom_2，选择「Radio 2」时显示custom_3，选择「Radio 3」时显示custom_4
• 同级的custom_5、custom_6不受上述控制

现有代码 #

HTML代码

<div class="ShowHide">
  Radio 1 <input type="radio" name="custom_1" value="1" id="CIVICRM_QFID_1 " /> 
Radio 2 <input type="radio" name="custom_1" value="2" id="CIVICRM_QFID_2" /> 
Radio 3 <input type="radio" name="custom_1" value="3" id="CIVICRM_QFID_3" />

  <div id="custom_2" class="crm-section custom_2-section form-item">Radio 1 Selected</div>
  <div id="custom_3" class="crm-section custom_3-section form-item">Radio 2 Selected</div>
  <div id="custom_4" class="crm-section custom_4-section form-item">Radio 3 Selected</div>
  <div id="custom_5" class="crm-section custom_5-section form-item"></div>
  <div id="custom_6" class="crm-section custom_6-section form-item"></div>
</div>

jQuery代码

CRM.$(function ($) {
  $("input[name$='custom_1']").click(function () {
    var test = $(this).val();
    $("#custom_2").hide();
    $("#custom_3" + test).show();
  });
});

问题分析 #

1. 初始隐藏未处理：页面加载时custom_2、custom_3、custom_4没有默认隐藏
2. ID匹配逻辑错误：代码中$("#custom_3" + test)会生成错误选择器（比如value=1时找custom_31），和实际需要显示的Div ID完全不匹配
3. 未统一隐藏所有目标Div：只隐藏了custom_2，切换单选框时可能出现多个Div同时显示的情况

修正方案 #

步骤1：默认隐藏目标Div

通过CSS直接设置，避免页面加载时的元素闪烁：

#custom_2, #custom_3, #custom_4 {
  display: none;
}

步骤2：修正jQuery逻辑

使用change事件监听单选框切换，每次切换先隐藏所有目标Div，再根据选中值显示对应元素：

CRM.$(function ($) {
  // 若未使用CSS初始化隐藏，可通过此代码实现
  // $("#custom_2, #custom_3, #custom_4").hide();

  // 监听单选框状态变化
  $("input[name='custom_1']").change(function () {
    var selectedVal = $(this).val();
    // 先隐藏所有目标Div
    $("#custom_2, #custom_3, #custom_4").hide();
    // 根据选中值显示对应Div
    switch(selectedVal) {
      case '1':
        $("#custom_2").show();
        break;
      case '2':
        $("#custom_3").show();
        break;
      case '3':
        $("#custom_4").show();
        break;
    }
  });
});

或者更简洁的写法（利用value与ID的对应关系）：

CRM.$(function ($) {
  $("#custom_2, #custom_3, #custom_4").hide();

  $("input[name='custom_1']").change(function () {
    var targetId = "custom_" + (parseInt($(this).val()) + 1);
    $("#custom_2, #custom_3, #custom_4").hide();
    $("#" + targetId).show();
  });
});

额外提示 #

• HTML中CIVICRM_QFID_1 的ID末尾有多余空格，建议删除，避免后续选择器出错
• 使用change事件比click更符合单选框的交互逻辑，能准确监听状态切换

内容的提问来源于stack exchange，提问作者Garuda Consulting