基于复选框状态控制对应区域显示/隐藏的问题及需求实现

嘿，我帮你搞定这两个问题！咱们先梳理下原代码里的小问题，然后给出调整后的方案：

问题根源 #

• 切换选中其他复选框时，原代码错误地对复选框组执行了slideUp，而非隐藏所有对应内容的div，导致之前的div残留显示
• 取消选中当前复选框时，同样操作了复选框组，没有针对当前选中项对应的div执行隐藏操作

修改后的代码 #

JavaScript部分 #

function selectOpenField() { 
  // 统一管理需要控制显示/隐藏的目标div选择器
  const targetContentDivs = "#checkboxHolder, #radioBoxHolder, #inputBoxHolder";
  
  $("input[name='vrije_velden']").on('click', function() { 
    const $currentCheckbox = $(this); 
    const checkboxGroup = "input:checkbox[name='" + $currentCheckbox.attr("name") + "']"; 
    const currentContentId = $currentCheckbox.val();
    const $currentContentDiv = $('#' + currentContentId);

    if ($currentCheckbox.is(":checked")) { 
      // 1. 取消同组其他复选框的选中状态
      $(checkboxGroup).not($currentCheckbox).prop("checked", false); 
      // 2. 隐藏所有内容div
      $(targetContentDivs).slideUp();
      // 3. 显示当前选中项对应的内容div
      $currentContentDiv.slideDown(); 
    } else { 
      // 取消选中时，隐藏当前对应的内容div
      $currentContentDiv.slideUp(); 
    } 
  }); 
}

// 初始化调用函数
selectOpenField();

HTML部分（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="custom-control custom-checkbox"> 
  <input type="checkbox" class="custom-control-input" id="checkbox" value="checkboxHolder" name="vrije_velden"> 
  <label class="custom-control-label" for="checkbox">Checkbox</label> 
</div> 
<div class="custom-control custom-checkbox"> 
  <input type="checkbox" class="custom-control-input" id="radio" value="radioBoxHolder" name="vrije_velden"> 
  <label class="custom-control-label" for="radio">Radio</label> 
</div> 
<div class="custom-control custom-checkbox"> 
  <input type="checkbox" class="custom-control-input" id="input" value="inputBoxHolder" name="vrije_velden"> 
  <label class="custom-control-label" for="input">Input</label> 
</div>
<!-- 请确保你有对应的内容div，示例如下：
<div id="checkboxHolder" style="display:none;">Checkbox对应的内容</div>
<div id="radioBoxHolder" style="display:none;">Radio对应的内容</div>
<div id="inputBoxHolder" style="display:none;">Input对应的内容</div>
-->

---

## 关键修改说明
- 新增`targetContentDivs`变量，统一管理所有需要控制的内容div，后期新增复选框时只需添加对应ID选择器，维护更方便
- 选中复选框时，先取消同组其他复选框的选中状态，再**隐藏所有内容div**，最后显示当前选中项对应的div，彻底解决切换时旧div残留的问题
- 取消选中时，直接针对当前复选框对应的内容div执行隐藏操作，修复了取消选中后div仍显示的问题
- 简化了原有的循环逻辑，代码更简洁易读

---

## 测试验证
- 选中任意复选框：对应内容div显示，其余内容div隐藏
- 切换选中另一个复选框：原选中项的div隐藏，新选中项的div显示
- 取消当前选中的复选框：对应的内容div隐藏

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