jQuery中click event对比及模拟radio buttons逻辑的toggleClass实现问询

云原生阿岚

2026-5-22

问题2：将现有代码改为单选按钮逻辑

你的现有代码会让多个div独立切换类，无法实现“同一时间仅选中一个”的单选效果。要改成类似radio按钮的逻辑，核心是先重置所有目标div的状态，再单独设置当前点击的元素，下面提供两种常见方案：

方案1：严格单选（只能选一个，无法取消选中）

和原生radio按钮逻辑一致，点击某个div后保持选中状态，直到点击另一个div：

$('#C1,#C2,#C3').click(function(e) { 
  // 第一步：把所有目标div恢复为未选中状态
  $('#C1,#C2,#C3').removeClass('w3-green').addClass('w3-light-gray');
  // 第二步：将当前点击的div设置为选中状态
  $(this).removeClass('w3-light-gray').addClass('w3-green');
});

方案2：支持取消选中（点击已选中的div可取消全部选中）

如果需要允许点击已选中的div来取消所有选中状态，可以增加状态判断：

$('#C1,#C2,#C3').click(function(e) { 
  const $current = $(this);
  // 检查当前div是否已经处于选中状态
  const isActive = $current.hasClass('w3-green');

  // 先统一重置所有div的状态
  $('#C1,#C2,#C3').removeClass('w3-green').addClass('w3-light-gray');

  // 如果当前div之前未选中，才设置为选中；否则保持重置状态（取消选中）
  if (!isActive) {
    $current.removeClass('w3-light-gray').addClass('w3-green');
  }
});