你可以通过使用一个类隐藏所有的div，然后使用id显示你想要的div来做到这一点，下面是一个例子
网址：

<div id="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" />
        <div id="custom_1" class="radio-div">Radio 1 Selected</div>
        <div id="custom_2" class="radio-div">Radio 2 Selected</div>
    </div>

js：

<script src="jquery.js"></script>
<script>
    $('.radio-div').hide()
    $("input[name$='custom_1']").on('click', (e) => {
        $('.radio-div').hide()
        $("#custom_" + $(e.currentTarget).val()).show()
    })
</script>

下面的方法使用单选按钮（1，2，3）的值与要显示或隐藏的<div>元素的位置之间的关系。

function toggle(val) {
  $("#ShowHide div").each(function(i) {
    if (i + 1 === val) $(this).show();
    else $(this).hide();
  });
}
$("input[name$='custom_1']").click(function() {
  toggle(Number($(this).val()));
});
toggle(0); // hide all initially

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="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>

假设要显示的DIV元素有一个ID，它的整数后缀大于被选中的单选按钮的值，使用vanilla JS，可以像这样完成show/hide：

/*
  a delegated event handler bound to the parent container (edited question, edited parent)
  will process "change" events on all radio buttons within
  that parent element.
  
  DIV elements are selected in relation to this parent
  element only.
*/
document.addEventListener('change',e=>{
  if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
    /*
      find the numeric value of the radio button (event.target)
      and increment by one
    */
    let i=Number( e.target.value );
        i++;
    /*
      create the suitable ID or className attribute
      used to identify the DIV element
    */
    let id=`#custom_${i}`;
    /*
      If the DIV exists, hide all previously displayed DIV elements
      and show the relevant content
    */
    let div=e.target.parentNode.querySelector( id );
    if( div ){
      e.target.parentNode.querySelectorAll('div').forEach(div=>div.style.display='none');
      div.style.display='block';
    }
  }
});

.ShowHide{
  margin:1rem 0;
  padding:1rem;
  border:1px dotted grey
}

.ShowHide > div{
  display:none;
}

<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" />
  Radio 4 <input type="radio" name="custom_1" value="4" id="CIVICRM_QFID_4 "/>
  <div id="custom_2">Radio 1 Selected</div>
  <div id="custom_3">Radio 2 Selected</div>
  <div id="custom_4">Radio 3 Selected</div>
  <div id="custom_5">Radio 4 Selected</div>
  <div id="custom_6">Radio 5 Selected - will not be shown</div>
  <div id="custom_7">Radio 6 Selected - neither will this</div>
</div>

<div class="ShowHide">
  Radio 23 <input type="radio" name="custom_2" value="23" id="CIVICRM_QFID_23 "/>
  Radio 24 <input type="radio" name="custom_2" value="24" id="CIVICRM_QFID_24" />
  Radio 25 <input type="radio" name="custom_2" value="25" id="CIVICRM_QFID_25" />
  <div id="custom_24">Radio 23 Selected</div>
  <div id="custom_25">Radio 24 Selected</div>
  <div id="custom_26">Radio 25 Selected</div>
  <div id="custom_27">Radio 27 Selected - will not be shown</div>
  <div id="custom_29">Radio 28 Selected - neither will this</div>
</div>

下面是一个使用函数:has() pseudo-class的CSS解决方案：

.crm-section {
  display: none;
}

:has(#CIVICRM_QFID_1:checked) #custom_2,
:has(#CIVICRM_QFID_2:checked) #custom_3,
:has(#CIVICRM_QFID_3:checked) #custom_4{
  display: block;
}

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

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

另一种是使用~通用兄弟组合子选择器

.crm-section {
  display: none;
}

#CIVICRM_QFID_1:checked ~ #custom_2,
#CIVICRM_QFID_2:checked ~ #custom_3,
#CIVICRM_QFID_3:checked ~ #custom_4{
  display: block;
}

<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 form-item">Radio 1 Selected</div>
  <div id="custom_3" class="crm-section form-item">Radio 2 Selected</div>
  <div id="custom_4" class="crm-section form-item">Radio 3 Selected</div>
  <div id="custom_5" class="crm-section form-item">Some other DIV 1</div>
  <div id="custom_6" class="crm-section form-item">Some other DIV 2</div>
</div>