jQuery按变量类选择元素及复选框模拟单选按钮分组问题

没问题，这个需求我做项目时也碰到过，用 JavaScript 就能轻松搞定。核心逻辑很直白：监听每个复选框的选中事件，当某个复选框被选中时，找到同组（父SPAN共享指定类名）的其他所有复选框，把它们的选中状态取消就好。

先看HTML结构示例 #

假设你的分组类名以 group- 为前缀（你可以根据实际情况调整规则），每个复选框的父SPAN既有分组类，也有其他样式类：

<!-- 分组1：父SPAN共享 class "group-1" -->
<span class="group-1 checkbox-item">
  <input type="checkbox" value="opt1"> 选项1
</span>
<span class="group-1 checkbox-item">
  <input type="checkbox" value="opt2"> 选项2
</span>

<!-- 分组2：父SPAN共享 class "group-2" -->
<span class="group-2 checkbox-item">
  <input type="checkbox" value="opt3"> 选项3
</span>
<span class="group-2 checkbox-item">
  <input type="checkbox" value="opt4"> 选项4
</span>

原生JavaScript实现方案 #

不依赖任何库，兼容性拉满：

// 用事件委托处理所有复选框，包括动态生成的
document.addEventListener('change', function(e) {
  const checkbox = e.target;
  // 只对复选框元素生效
  if (checkbox.type !== 'checkbox') return;

  // 只有当前复选框被选中时才执行逻辑
  if (checkbox.checked) {
    // 从父SPAN的类列表里筛选出分组类（这里用"group-"前缀识别，可自定义规则）
    const parentClasses = Array.from(checkbox.parentElement.classList);
    const groupClass = parentClasses.find(cls => cls.startsWith('group-'));

    if (groupClass) {
      // 找到同组的所有复选框
      const sameGroupCheckboxes = document.querySelectorAll(`span.${groupClass} input[type="checkbox"]`);
      // 取消其他复选框的选中状态
      sameGroupCheckboxes.forEach(cb => {
        if (cb !== checkbox) cb.checked = false;
      });
    }
  }
});

jQuery实现方案（项目用jQuery的话更简洁） #

// 事件委托处理所有复选框
$(document).on('change', 'input[type="checkbox"]', function() {
  if ($(this).is(':checked')) {
    // 筛选父SPAN的分组类
    const groupClass = $(this).parent().attr('class').split(' ').find(cls => cls.startsWith('group-'));
    if (groupClass) {
      // 取消同组其他复选框的选中状态
      $(`span.${groupClass} input[type="checkbox"]`).not(this).prop('checked', false);
    }
  }
});

关键注意事项 #

• 分组类识别规则：上面的代码用 group- 前缀来区分分组类，你可以根据自己的实际类名修改判断逻辑（比如固定分组类名为 checkbox-group）。
• 动态元素兼容：代码用了事件委托，后续动态添加的复选框也能正常触发逻辑。
• 初始状态校验：如果需要默认选中某个复选框，确保页面加载时同组内只有这一个复选框处于选中状态，避免初始就出现多选中的情况。

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