JQuery实现类单选按钮的复选框：不同容器复选框互不干扰需求

我来帮你搞定这个需求——让分布在不同容器里的复选框各自形成独立的「类单选」组：同一容器内只能选中一个复选框，不同容器的选中状态互不干扰。下面是完整的实现方案：

1. HTML结构示例 #

首先我们用容器（比如<div>）给复选框分组，给每个分组容器加一个统一的类名（比如checkbox-group），方便后续jQuery定位：

<!-- 第一组复选框 -->
<div class="checkbox-group">
  <label><input type="checkbox" value="g1-opt1"> 分组1选项1</label>
  <label><input type="checkbox" value="g1-opt2"> 分组1选项2</label>
  <label><input type="checkbox" value="g1-opt3"> 分组1选项3</label>
</div>

<!-- 第二组复选框 -->
<div class="checkbox-group">
  <label><input type="checkbox" value="g2-optA"> 分组2选项A</label>
  <label><input type="checkbox" value="g2-optB"> 分组2选项B</label>
  <label><input type="checkbox" value="g2-optC"> 分组2选项C</label>
</div>

2. jQuery核心逻辑 #

通过监听复选框的change事件，每次选中某一个复选框时，仅取消同一容器内其他复选框的选中状态，完全不影响其他容器的选项：

$(document).ready(function() {
  // 给所有分组内的复选框绑定状态改变事件
  $('.checkbox-group input[type="checkbox"]').on('change', function() {
    // 获取当前复选框所在的分组容器
    const currentGroup = $(this).closest('.checkbox-group');
    
    // 只有当当前复选框被选中时，才取消同组其他复选框的选中状态
    if ($(this).is(':checked')) {
      currentGroup.find('input[type="checkbox"]')
                  .not(this) // 排除当前点击的复选框
                  .prop('checked', false); // 取消其他复选框的选中
    }
  });
});

3. 进阶：支持动态添加的复选框 #

如果你的页面会通过JavaScript动态新增复选框（比如异步加载内容），可以改用事件委托的方式绑定事件，确保新添加的元素也能触发逻辑：

// 把事件绑定到document上，委托给目标元素
$(document).on('change', '.checkbox-group input[type="checkbox"]', function() {
  const currentGroup = $(this).closest('.checkbox-group');
  if ($(this).is(':checked')) {
    currentGroup.find('input[type="checkbox"]').not(this).prop('checked', false);
  }
});

逻辑说明 #

• 用closest('.checkbox-group')精准定位当前复选框所属的分组容器，确保只操作同组元素；
• 仅在当前复选框被选中时才执行取消操作，这样用户也可以主动取消当前组的所有选择，且不会影响其他组；
• 代码简洁易懂，不需要依赖额外插件，完全基于原生jQuery API实现。

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