复选框关联Div显示异常，是否需改用CSS类替代jQuery方法？

方案一：修复现有jQuery代码（无需换CSS类） #

你的第二个需求未生效，大概率是事件绑定或显示/隐藏逻辑的问题。可以按以下步骤调整：

1. 给每个复选框和对应的div设置关联标识（比如用data-target属性绑定目标div的ID）
2. 复选框点击时，先隐藏所有目标div，再显示当前选中项对应的div

示例代码：

<!-- 复选框部分 -->
<input type="checkbox" class="single-checkbox" data-target="#div1"> 选项1
<input type="checkbox" class="single-checkbox" data-target="#div2"> 选项2

<!-- 目标Div部分 -->
<div id="div1" style="display: none;">内容1</div>
<div id="div2" style="display: none;">内容2</div>

// 单选复选框逻辑（保留你的现有代码）
$('.single-checkbox').on('change', function() {
  $('.single-checkbox').not(this).prop('checked', false);
  
  // 新增显示/隐藏逻辑
  $('[id^="div"]').hide(); // 先隐藏所有目标div
  $($(this).data('target')).show(); // 显示当前选中项对应的div
});

方案二：改用CSS类实现（更简洁） #

如果觉得jQuery的show()/hide()不够直观，用CSS类确实是不错的选择，逻辑更清晰：

1. 给所有目标div加默认隐藏的类（比如.hidden { display: none; }）
2. 给选中的复选框对应的div加显示类（比如.visible { display: block; }）
3. 点击复选框时，移除所有div的显示类，再给当前选中项对应的div添加显示类

示例代码：

.hidden { display: none; }
.visible { display: block; }

<input type="checkbox" class="single-checkbox" data-target="#div1"> 选项1
<input type="checkbox" class="single-checkbox" data-target="#div2"> 选项2

<div id="div1" class="hidden">内容1</div>
<div id="div2" class="hidden">内容2</div>

$('.single-checkbox').on('change', function() {
  $('.single-checkbox').not(this).prop('checked', false);
  
  // CSS类切换逻辑
  $('[id^="div"]').removeClass('visible').addClass('hidden');
  $($(this).data('target')).removeClass('hidden').addClass('visible');
});

关键注意事项 #

• 确保复选框和目标div的关联标识（比如data-target）对应正确，不要写错ID
• 如果是动态生成的元素，要使用事件委托（$(document).on('change', '.single-checkbox', function() { ... })）
• 初始状态下，所有div默认隐藏，只有选中对应复选框时才显示

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