求助：实现复选框联动显示Div，双选特定复选框才显示对应Div

我来帮你调整代码实现这个需求，核心是先统一隐藏所有Div，再根据选中的复选框组合来判断要显示哪些元素：

修正后的完整代码 #

HTML（和你的原代码一致，无需修改）

<input type="checkbox" class="checkbox" value="flu"/>flu 
<input type="checkbox" class="checkbox" value="cough"/>cough 
<input type="checkbox" class="checkbox" value="fever"/>fever 
<div class="item flu" > flu </div> 
<div class="item cough"> cough </div> 
<div class="item fever"> fever </div> 
<div class="item flu cough"> flu + cough </div>

CSS（微调样式让显示更清晰）

.item{ 
  background-color:yellow; 
  width:120px; /* 加宽适配组合文本 */
  height:50px; 
  display:none; 
  margin: 5px 0; /* 添加间距避免元素拥挤 */
  line-height:50px; /* 文字垂直居中 */
  text-align:center;
}

jQuery（核心逻辑调整）

jQuery(document).ready(function(){ 
  const $checkboxes = jQuery('.checkbox');
  const $items = jQuery('.item');

  // 监听复选框变化事件
  $checkboxes.change(function(){
    // 先隐藏所有元素，避免残留显示
    $items.hide();

    // 获取所有选中的复选框值，转为数组
    const checkedValues = $checkboxes.filter(':checked').map(function(){
      return this.value;
    }).get();

    // 判断是否同时选中了flu和cough
    const hasFlu = checkedValues.includes('flu');
    const hasCough = checkedValues.includes('cough');
    
    if (hasFlu && hasCough) {
      // 同时选中两者时，只显示组合Div
      $items.filter('.flu.cough').show();
      // 从选中数组中移除这两个值，避免重复显示单个Div
      checkedValues.splice(checkedValues.indexOf('flu'), 1);
      checkedValues.splice(checkedValues.indexOf('cough'), 1);
    }

    // 处理剩下的选中项（比如单独的flu/cough、fever，或其他组合）
    checkedValues.forEach(function(val){
      $items.filter(`.${val}`).not('.flu.cough').show();
    });
  });
});

逻辑说明 #

1. 统一初始化隐藏：每次复选框状态变化时，先隐藏所有.item元素，避免之前的显示状态干扰
2. 收集选中值：把所有选中的复选框值整理成数组，方便后续组合判断
3. 优先处理flu+cough组合：如果两个复选框同时选中，优先显示组合Div，并移除数组中的对应值，防止单个Div重复显示
4. 处理常规选中项：遍历剩下的选中值，显示对应的单个Div（排除组合Div，避免冲突）

这样就能完美实现需求：单独选flu/cough显示各自的Div，同时选两者显示组合Div，选fever显示对应Div，其他多选组合（比如flu+fever）也能正确显示对应的单个元素~

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