如何用JavaScript为<a>标签添加单选按钮行为？

看起来你想让带data-change-option属性的链接实现类似单选框的互斥选中——点一个变颜色，再点另一个时，之前选中的自动恢复原样对吧？结合你现有的jQuery点击事件，我给你调整一下代码，用CSS类来控制样式，逻辑也清晰：

首先先写个CSS类来定义选中状态的样式，这样以后改颜色或者其他样式直接改CSS就行，不用碰JS：

/* 自定义选中样式，颜色你可以随便换 */
.selected-option {
  color: #e74c3c; /* 比如用红色 */
  font-weight: bold; /* 可选：加个加粗增强视觉反馈 */
}

然后修改你的点击事件代码，加上互斥选中的逻辑：

$(document).on('click', '[data-change-option]', function(e) {
  e.preventDefault();
  const $clickedItem = $(this);
  
  // 第一步：移除所有同类型元素的选中样式（实现互斥）
  $('[data-change-option]').removeClass('selected-option');
  
  // 第二步：给当前点击的元素加上选中样式
  $clickedItem.addClass('selected-option');
  
  // 下面保留你原来的业务逻辑，不用动
  const optionIndex = parseInt($clickedItem.data('changeOption')),
        optionValue = $clickedItem.data('changeValue');
  
  if(optionSelectors.optionExistInSelect(optionSelectors.selectors[optionIndex].element, optionValue)) {
    // 你原来的代码逻辑继续写在这里...
  }
});

额外优化：如果需要分组单选 #

要是你页面上有多组这样的选项，不想不同组之间互相干扰，可以给每组元素加个共同的分组标识，比如data-option-group属性：

<!-- 第一组 -->
<a href="#" data-change-option="0" data-change-value="1" data-option-group="size">小</a>
<a href="#" data-change-option="0" data-change-value="2" data-option-group="size">中</a>
<a href="#" data-change-option="0" data-change-value="3" data-option-group="size">大</a>

<!-- 第二组 -->
<a href="#" data-change-option="1" data-change-value="red" data-option-group="color">红色</a>
<a href="#" data-change-option="1" data-change-value="blue" data-option-group="color">蓝色</a>

然后修改JS代码，只移除同组内的选中样式：

$(document).on('click', '[data-change-option]', function(e) {
  e.preventDefault();
  const $clickedItem = $(this);
  const currentGroup = $clickedItem.data('optionGroup');
  
  // 只清除同组元素的选中状态
  $(`[data-change-option][data-option-group="${currentGroup}"]`).removeClass('selected-option');
  
  $clickedItem.addClass('selected-option');
  
  // 你的原有业务逻辑...
});

这样不同组的选项就不会互相影响了，每组内部保持单选互斥。

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